Home >Web Front-end >JS Tutorial >jquery implements all selection, inverse selection, and obtains all selected checkboxes_jquery

jquery implements all selection, inverse selection, and obtains all selected checkboxes_jquery

WBOY
WBOYOriginal
2016-05-16 15:28:261474browse

I gave 7 different checkbox statuses and shared them with you one by one.

1. Select all

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

2. Cancel all selections (select none)

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

3. Select all odd numbers

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

4. Select all even numbers

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

5. Counter-election

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

or

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

6. Get the value of the selected item

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

7. Traverse selected items

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

The following example describes jquery's implementation of selecting all, inverting selection, and obtaining 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

The above is a simple example demonstration of how to use checkbox in jquery. I hope it will be helpful to everyone's learning.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn