Summary of jquery's actions on the check box of checkbox

jquery 12 tips for manipulating check boxes (checkbox).

1. Obtain a single checkbox selected item (3 ways of writing)

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

or

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

or

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

2. Get multiple checkbox selections

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

3. Set the first checkbox as the selected value

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

or

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

4. Set the last checkbox as the selected value

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

or

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

5. Set any checkbox as the selected value according to the index value

$('input:checkbox).eq( The index value ).attr('checked', 'true');

Index = 0,...
or

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

6. Select multiple checkbox and select the checkbox of the first and second

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

0

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

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

8. Delete checkbox of Value=1

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

9. Delete number checkbox

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

3

Index = 0,...
If the third checkbox is deleted:

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

4

10. Iterate over checkbox

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

5

11. Select them all

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

6

12. Deselect all

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

Some related operations of JQuery on CheckBox

1. Select CheckBox through the selector:

1. Set an id attribute to CheckBox and select it through the id selector:

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

JQuery:

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

9

2. Set an class attribute to CheckBox and select it through the class selector:

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

JQuery:

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

3. Select by TAB selector and attribute selector:

  <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. checkbox is traversed using each() method:

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

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

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

In HTML, if 1 check box is selected, the corresponding mark is checked="checked". But if you use jquery alert($("#id").attr ("checked")), it will indicate that if("checked"==$("#id").attr ("checked")) is an error. 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') );
  }

What's the difference between $("input[name='box'] : checked") and $("input[name='box']")? No, I tried using $("input[name='box']").
4. Get the value of the unselected checkbox:

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

5. Set the value of value attribute of checkbox:

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

3.1 Generally, an js array is created to store the values obtained by traversing checkbox. The method of creating js array is as follows:

1. var array= new Array();

2. Add data to array:

array.push($(this).val());

3. Array output separated by ", ":

alert(array.join(','));