Summary of jquery operations on checkboxes

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()

or

$("input:[type='checkbox']:checked").val();

or

$("input:[name='ck']:checked").val();

2. Get multiple checkbox selected items

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

3. Set the first checkbox to the selected value

$('input:checkbox:first').attr("checked",'checked');

or

$('input:checkbox').eq(0).attr("checked",'true');

4. Set the last checkbox to the selected value

$('input:radio:last').attr('checked', 'checked')

or

$('input:radio:last').attr('checked', 'true')

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

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

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

$('input:radio').slice(1,2).attr('checked', 'true');

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

$('input:radio').slice(0,2).attr('checked','true');

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

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

8. Delete the checkbox with Value=1

$("input:checkbox[value='1']").remove();

9. Delete which checkbox

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

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

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

10. Traverse the checkbox

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

11. Select all

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

12. Deselect all

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

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

JQuery:

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

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

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

JQuery:

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

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

JQuery:

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

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

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

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

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

   $("input[name='box']").attr("checked","checked");

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='box'][checked]").each(function(){
  if (true == $(this).attr("checked")) {
     alert( $(this).attr('value') );
  }

or:

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

$("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='box']").each(function(){
     if ($(this).attr('checked') ==false) {
        alert($(this).val());
      }
   });

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

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

[Related tutorial recommendations]

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