jquery实现全选、反选、获得所有选中的checkbox

举了7个不同的checkbox状态，和大家一一分享。

1、全选

?

1 2 3

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

2、取消全选（全不选）

?

1 2 3

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

3、选中所有奇数

?

1 2 3

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

4、选中所有偶数

?

1 2 3

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

5、反选

?

1 2 3 4 5 6 7 8 9 10 11 12

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

或者

?

1 2 3 4 5

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

6、获取选择项的值

?

1 2 3 4 5 6 7 8

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

7、遍历选中项

?

1 2 3 4

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

下面实例讲述了jquery实现全选、反选、获得所有选中的checkbox。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

< html xmlns = "http://www.w3.org/1999/xhtml" > < head runat = "server" > < title >无标题页</ title > < script src = "js/jquery-1.6.min.js" type = "text/javascript" ></ script > < script type = "text/javascript" > jQuery(function($){ //全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) //取消全选 $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }) //选中所有基数 $("#btn3").click(function(){ $("input[name='checkbox']:even").attr("checked","true"); }) //选中所有偶数 $("#btn6").click(function(){ $("input[name='checkbox']:odd").attr("checked","true"); }) //反选 $("#btn4").click(function(){ $("input[name='checkbox']").each(function(){ if($(this).attr("checked")) { $(this).removeAttr("checked"); } else { $(this).attr("checked","true"); } }) }) //或许选择项的值 var aa=""; $("#btn5").click(function(){ $("input[name='checkbox']:checkbox:checked").each(function(){ aa+=$(this).val() }) document.write(aa); }) }) </ script > </ head > < body > < form id = "form1" runat = "server" > < div > < input type = "button" id = "btn1" value = "全选" > < input type = "button" id = "btn2" value = "取消全选" > < input type = "button" id = "btn3" value = "选中所有奇数" > < input type = "button" id = "btn6" value = "选中所有偶数" > < input type = "button" id = "btn4" value = "反选" > < input type = "button" id = "btn5" value = "获得选中的所有值" > < br > < input type = "checkbox" name = "checkbox" value = "checkbox1" > checkbox1 < input type = "checkbox" name = "checkbox" value = "checkbox2" > checkbox2 < input type = "checkbox" name = "checkbox" value = "checkbox3" > checkbox3 < input type = "checkbox" name = "checkbox" value = "checkbox4" > checkbox4 < input type = "checkbox" name = "checkbox" value = "checkbox5" > checkbox5 < input type = "checkbox" name = "checkbox" value = "checkbox6" > checkbox6 < input type = "checkbox" name = "checkbox" value = "checkbox7" > checkbox7 < input type = "checkbox" name = "checkbox" value = "checkbox8" > checkbox8 </ div > </ form > </ body > </ html >