jQuery实现CheckBox全选、全不选

最新推荐文章于 2025-03-27 16:30:45 发布

笨小葱

最新推荐文章于 2025-03-27 16:30:45 发布

阅读量500

点赞数

分类专栏： javaweb javascript

javaweb 同时被 2 个专栏收录

13 篇文章

订阅专栏

javascript

4 篇文章

订阅专栏

本文介绍使用jQuery实现复选框全选与反选功能的方法，并演示如何通过点击全选按钮来控制一组子复选框的状态，同时展示了如何获取已选中复选框的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
 <!DOCTYPE html PUBLIC  
 "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 > 
 
 <html xmlns= 
 "http://www.w3.org/1999/xhtml" 
 > 
 
 <head runat= 
 "server" 
 > 
 
 <title>jQuery实现CheckBox全选、全不选</title> 
 
 <script src= 
 "http://code.jquery.com/jquery-1.4.4.min.js" 
  type= 
 "text/javascript" 
 ></script>    <script type= 
 "text/javascript" 
 > 
 
 $( 
 function 
 () { 
 
 $( 
 "#checkAll" 
 ).click( 
 function 
 () { 
 
 $( 
 'input[name="subBox"]' 
 ).attr( 
 "checked" 
 , 
 this 
 .checked);  
 
 }); 
 
 var 
  $subBox = $( 
 "input[name='subBox']" 
 ); 
 
 $subBox.click( 
 function 
 (){ 
 
 $( 
 "#checkAll" 
 ).attr( 
 "checked" 
 ,$subBox.length == $( 
 "input[name='subBox']:checked" 
 ).length ?  
 true 
  :  
 false 
 ); 
 
 }); 
 
               //下面的代码是获取上面实例中选中的checkbox的value值: 
     
  var arrChk=$("input[name='chk_list']:checked"); 
 
                          $(arrChk).each(function(){ 
 
                             window.alert(this.value);                         
 
                        });          
 
 }); 
 
 </script> 

 </head> 
 
 <body> 
 
 <div> 
 
 <input id= 
 "checkAll" 
  type= 
 "checkbox" 
  />全选 
 
 <input name= 
 "subBox" 
  type= 
 "checkbox" 
  />项1 
 
 <input name= 
 "subBox" 
  type= 
 "checkbox" 
  />项2 
 
 <input name= 
 "subBox" 
  type= 
 "checkbox" 
  />项3 
 
 <input name= 
 "subBox" 
  type= 
 "checkbox" 
  />项4 
 
 </div> 
 
 </body> 
 
 </html> 

 来源： <http://www.oschina.net/code/snippet_119416_5689>