<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > |
02 | <html xmlns= "http://www.w3.org/1999/xhtml" > |
03 | <head runat= "server" > |
04 | <title>jQuery实现CheckBox全选、全不选</title> |
05 | <script src= "http://code.jquery.com/jquery-1.4.4.min.js" type= "text/javascript" ></script> <script type= "text/javascript" > |
06 | $( function () { |
07 | $( "#checkAll" ).click( function () { |
08 | $( 'input[name="subBox"]' ).attr( "checked" , this .checked); |
09 | }); |
10 | var $subBox = $( "input[name='subBox']" ); |
11 | $subBox.click( function (){ |
12 | $( "#checkAll" ).attr( "checked" ,$subBox.length == $( "input[name='subBox']:checked" ).length ? true : false ); |
13 | }); |
14 | }); |
15 | </script> |
16 |
17 | </head> |
18 | <body> |
19 | <div> |
20 | <input id= "checkAll" type= "checkbox" />全选 |
21 | <input name= "subBox" type= "checkbox" />项1 |
22 | <input name= "subBox" type= "checkbox" />项2 |
23 | <input name= "subBox" type= "checkbox" />项3 |
24 | <input name= "subBox" type= "checkbox" />项4 |
25 | </div> |
26 | </body> |
27 | </html> |
这样简单些
$('#CheckAll').click(function(){
$('input[name="subBox"]').attr("checked",this.checked);
});