Summary of jquery operations on checkboxes-JS Tutorial-php.cn

Summary of jquery operations on checkboxes

PHPz

Release： 2018-10-13 17:00:34

Original

1473 people have browsed it

This article summarizes and introduces some jQuery methods and techniques for operating checkboxes. It is very simple and practical. Friends in need can refer to it.

12 tips for jquery operation checkbox.

1. Get a single checkbox selected item (three writing methods)

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

Copy after login

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

Copy after login

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

Copy after login

2. Get multiple checkbox selected items

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

Copy after login

3. Set the first checkbox to the selected value

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

Copy after login

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

Copy after login

4. Set the last checkbox to the selected value

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

Copy after login

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

Copy after login

5. Set according to index value Any checkbox is the selected value

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

Copy after login

index value = 0,1,2....
or

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

Copy after login

6. Select multiple checkboxes and select the first and second checkboxes at the same time

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

Copy after login

7. Set the checkbox to the selected value according to the Value value

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

Copy after login

8. Delete the checkbox with Value=1

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

Copy after login

9. Delete which checkbox

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

Copy after login

Index value=0,1,2....
If you delete the third checkbox:

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

Copy after login

10. Traverse the checkbox

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

Copy after login

11. Select all

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

Copy after login

12. Deselect all

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

Copy after login

Some related operations of JQuery on CheckBox

1. Select the CheckBox through the selector:

1. Set an id attribute to the CheckBox, through id selector selection:

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

Copy after login

JQuery:

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

Copy after login

2. Set a class for CheckBox Attributes, selected through the class selector:

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

Copy after login

JQuery:

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

Copy after login

3. Through tags Selector and attribute selector to select:

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

Copy after login

JQuery:

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

Copy after login

2. Operation of CheckBox:
Take this checkBox code as an example:

  <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" />

Copy after login

1. Use each() to traverse the checkbox Method:

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

Copy after login

2. Set the checkbox to be selected using attr(); Method:

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

Copy after login

In HTML, if a checkbox is checked, the corresponding tag is checked="checked". But if you use jquery alert($("#id").attr("checked")), you will be prompted that it is "true" instead of "checked", so judge if("checked"==$("#id" ).attr("checked")) is wrong, it should be if(true == $("#id").attr("checked"))

3. Get the value of the selected checkbox :

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

Copy after login

or:

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

Copy after login

$("input[ name='box']: What is the difference between checked") and $("input[name='box']")? I haven't tried it. I tried using $("input[name='box']") and it was successful. .
4. Get the value of the unchecked checkbox:

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

Copy after login

5. Set the value of the value attribute of the checkbox:

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

Copy after login

[Related tutorial recommendations]

1. JavaScript video tutorial
2. JavaScript online manual
3. bootstrap tutorial