확인란에 대한 jquery 작업 요약-JS 튜토리얼-php.cn

확인란에 대한 jquery 작업 요약

PHPz

풀어 주다： 2018-10-13 17:00:34

원래의

1473명이 탐색했습니다.

이 글은 체크박스를 조작하는 몇 가지 jQuery 방법과 기술을 요약하고 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

jquery 작업 체크박스에 대한 12가지 팁.

1. 단일 체크박스 선택 항목 가져오기(3가지 작성 방법)

$("input:checkbox:checked").val()

로그인 후 복사

또는

$("input:[type=&#39;checkbox&#39;]:checked").val();

로그인 후 복사

또는

$("input:[name=&#39;ck&#39;]:checked").val();

로그인 후 복사

2. 여러 개의 체크박스 선택 항목 가져오기

$(&#39;input:checkbox&#39;).each(function() {
if ($(this).attr(&#39;checked&#39;) ==true) {
alert($(this).val());
}
});

로그인 후 복사

3. 첫 번째 체크박스를 선택한 값으로 설정

$(&#39;input:checkbox:first&#39;).attr("checked",&#39;checked&#39;);

로그인 후 복사

또는

$(&#39;input:checkbox&#39;).eq(0).attr("checked",&#39;true&#39;);

로그인 후 복사

4. 마지막 체크박스를 선택한 값으로 설정

$(&#39;input:radio:last&#39;).attr(&#39;checked&#39;, &#39;checked&#39;)

로그인 후 복사

또는

$(&#39;input:radio:last&#39;).attr(&#39;checked&#39;, &#39;true&#39;)

로그인 후 복사

5. 다음에 따라 설정합니다. 인덱스 값 체크박스는 선택된 값

$(&#39;input:checkbox).eq(索引值).attr(&#39;checked&#39;, &#39;true&#39;);

로그인 후 복사

인덱스 값 = 0,1,2....
또는

$(&#39;input:radio&#39;).slice(1,2).attr(&#39;checked&#39;, &#39;true&#39;);

로그인 후 복사

6. 여러 개의 체크박스를 선택하고 첫 번째와 두 번째 체크박스를 동시에 선택하세요

$(&#39;input:radio&#39;).slice(0,2).attr(&#39;checked&#39;,&#39;true&#39;);

로그인 후 복사

7. Value 값에 따라 체크박스를 선택한 값으로 설정

$("input:checkbox[value=&#39;1&#39;]").attr(&#39;checked&#39;,&#39;true&#39;);

로그인 후 복사

8. 값이 1인 체크박스 삭제

$("input:checkbox[value=&#39;1&#39;]").remove();

로그인 후 복사

$("input:checkbox").eq(索引值).remove();

로그인 후 복사

색인 값=0,1,2....

세 번째 확인란을 삭제하는 경우:

$("input:checkbox").eq(2).remove();

로그인 후 복사

10. 체크박스 통과

$(&#39;input:checkbox&#39;).each(function (index, domEle) {
//写入代码
});

로그인 후 복사

11 . 모두 선택

$(&#39;input:checkbox&#39;).each(function() {
$(this).attr(&#39;checked&#39;, true);
});

로그인 후 복사

12. 모두 선택 해제

$(&#39;input:checkbox&#39;).each(function () {
$(this).attr(&#39;checked&#39;,false);
})

로그인 후 복사

CheckBox에서 JQuery의 일부 관련 작업

1. 선택기를 통해 CheckBox를 선택합니다.

1. ID를 설정합니다. ID 선택기 선택을 통해 CheckBox에 속성:

  <input type="checkbox" name="myBox" id="chkOne" value="1" checked="checked" />

로그인 후 복사

JQuery:

    $("#chkOne").click(function(){});

로그인 후 복사

2. 클래스 선택기를 통해 선택된 CheckBox 속성에 대한 클래스 설정:

  <input type="checkbox" name="myBox" class="chkTwo" value="1" checked="checked" />

로그인 후 복사

JQuery:

    $(".chkTwo").click(function(){});

로그인 후 복사

3. 태그 선택기 및 속성 선택기를 통해 선택:

  <input type="checkbox" name="someBox" value="1" checked="checked" />
  <input type="checkbox" name="someBox" value="2" />

로그인 후 복사

JQuery:

    $("input[name=&#39;someBox&#39;]").click(function(){});

로그인 후 복사

2. CheckBox 작업:

다음 checkBox 코드를 예로 들어 보겠습니다.

  <input type="checkbox" name="box" value="0" checked="checked" />
  <input type="checkbox" name="box" value="1" />
  <input type="checkbox" name="box" value="2" />
  <input type="checkbox" name="box" value="3" />

로그인 후 복사

1. 각각()을 사용합니다. 체크박스 탐색 방법:

    $("input[name=&#39;box&#39;]").each(function(){});

로그인 후 복사

2. attr()을 사용하여 선택할 체크박스를 설정합니다. 방법:

   $("input[name=&#39;box&#39;]").attr("checked","checked");

로그인 후 복사

HTML에서는 체크박스를 선택하면 해당 태그가 check="checked"됩니다. 하지만 jquery Alert($("#id").attr("checked"))를 사용하면 "checked" 대신 "true"라는 메시지가 표시되므로 if("checked"==$( "#id" ).attr("checked"))가 잘못되었습니다. if(true == $("#id").attr("checked"))

값을 가져옵니다. 선택한 확인란의 선택:

  $("input[name=&#39;box&#39;][checked]").each(function(){
  if (true == $(this).attr("checked")) {
     alert( $(this).attr(&#39;value&#39;) );
  }

로그인 후 복사

또는:

  $("input[name=&#39;box&#39;]：checked").each(function(){
  if (true == $(this).attr("checked")) {
     alert( $(this).attr(&#39;value&#39;) );
  }

로그인 후 복사

$ ("input[ name='box']: selected")와 $("input[name='box']")의 차이점은 무엇입니까? $("input[name)을 사용해 본 적이 없습니다. ='box']") 성공했습니다. .

4. 선택되지 않은 체크박스의 값을 가져옵니다:

  $("input[name=&#39;box&#39;]").each(function(){
     if ($(this).attr(&#39;checked&#39;) ==false) {
        alert($(this).val());
      }
   });

로그인 후 복사

5. 체크박스의 값 속성 값을 설정합니다:

     $(this).attr("value",值);

로그인 후 복사

【관련 추천 튜토리얼】

JavaScript 동영상 튜토리얼

2.JavaScript 온라인 매뉴얼
3. 부트스트랩 튜토리얼