Detailed explanation of various simple usage examples of jquery operating checkbox-JS Tutorial-php.cn

Detailed explanation of various simple usage examples of jquery operating checkbox

伊谢尔伦

Release： 2017-07-19 13:45:34

Original

1803 people have browsed it

A simple example demonstration of how to use checkbox in jquery, 7 different checkbox states are given, I hope it will be helpful to everyone's learning.

1. Select all

$("#btn1").click(function(){ 
$("input[name=&#39;checkbox&#39;]").attr("checked","true"); 
})

Copy after login

2. Unselect all (select none)

$("#btn2").click(function(){ 
$("input[name=&#39;checkbox&#39;]").removeAttr("checked"); 
})

Copy after login

3. Select all odd numbers

$("#btn3").click(function(){ 
$("input[name=&#39;checkbox&#39;]:odd").attr("checked","true"); 
})

Copy after login

4. Select all even numbers

$("#btn6").click(function(){ 
$("input[name=&#39;checkbox&#39;]:even").attr("checked","true"); 
})

Copy after login

5. Invert selection

$("#btn4").click(function(){ 
$("input[name=&#39;checkbox&#39;]").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked","true"); 
} 
}) 
})

Copy after login

$("#invert").click(function(){
  $("#ruleMessage [name=&#39;delModuleID&#39;]:checkbox").each(function(i,o){
   $(o).attr("checked",!$(o).attr("checked"));
  });
 });

Copy after login

6. Get the value of the selection

var aa=""; 
$("#btn5").click(function(){ 
$("input[name=&#39;checkbox&#39;]:checkbox:checked").each(function(){ 
aa+=$(this).val() 
}) 
document.write(aa); 
}) 
})

Copy after login

7. Traverse the selected items

$("input[type=checkbox][checked]").each(function(){
 //由于复选框一般选中的是多个,所以可以循环输出 
 alert($(this).val()); 
});

Copy after login

The following example describes how jquery implements full selection and inverse selection , get all selected checkboxes. Share it with everyone for your reference. The details are as follows:

The screenshot of the running effect is as follows:

The specific code is as follows:

 
 
无标题页 
 
 

 
 
 
 
 
 
 
 
 
 

 
 
checkbox1 
 
checkbox2 
 
checkbox3 
 
checkbox4 
 
checkbox5 
 
checkbox6 
 
checkbox7 
 
checkbox8

Copy after login

The above is the detailed content of Detailed explanation of various simple usage examples of jquery operating checkbox. For more information, please follow other related articles on the PHP Chinese website!