Jquery operations on the checkbox _ jquery-js tutorial

This article summarizes some methods and techniques for using the check box for jQuery operations. It is very simple and practical. For more information, see. 12 tips for jquery operation check box (checkbox.

1. Obtain the selected items of a single checkbox (three methods)

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

Or

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

Or

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

2. Obtain 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 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 based on the index value.

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

Index value = 0, 1, 2 ....
Or

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

6. Select multiple checkboxes and select 1st and 2nd checkboxes at the same time.

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

7. Set checkbox as the selected Value based on the Value.

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

8. Delete the checkbox with Value = 1

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

9. Delete the number of checkpoints

$ ("Input: checkbox"). eq (index value). remove ();

Index value = 0, 1, 2 ....
For example, delete 3rd checkboxes:

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

10. traverse the checkbox

$ ('Input: checkbox'). each (function (index, domEle) {// write code });

11. Select All

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

12. deselect all

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

Some operations of JQuery on CheckBox

1. Select CheckBox using the selector:

1. Set an id attribute for the CheckBox and select it using the id selector:

JQuery:

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

2. Set a class attribute for the CheckBox and select through the class selector:

JQuery:

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

3. select from the tag selector and attribute selector:

JQuery:

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

Ii. operations on the CheckBox:
Take this checkBox code as an example:

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

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

2. Set the checkbox to use attr (). Method:

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

In HTML, if a check box is selected, it is marked as checked = "checked ". However, if jquery alert ($ ("# id") is used "). attr ("checked") will prompt you to be "true" instead of "checked", so you can determine if ("checked" = $ ("# id "). attr ("checked") is incorrect. 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']: checked") is different from $ ("input [name = 'box, I tried $ ("input [name = 'box.
4. Obtain the value of the unselected 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", value );

3. Create a js array to store the values obtained by traversing the checkbox. The method for creating a js array is as follows:

1. var array = new Array ();

2. Add data to the array:

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

3. The array is separated by commas:

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