Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 15:28:26
Original
1443 people have browsed it

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"); 
}) 
Copy after login

2. Cancel all selections (select none)

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

3. Select all odd numbers

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

4. Select all even numbers

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

5. Counter-election

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

or

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

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); 
}) 
}) 
Copy after login

7. Traverse selected items

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

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
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template