1 <div id="list"> 2 <ul id="choseList" > 3 <li><input type="checkbox" name="chose" value="1"> 打篮球</li> 4 <li><input type="checkbox" name="chose" value="1"> 踢足球</li> 5 <li><input type="checkbox" name="chose" value="1"> 打乒乓球</li> 6 <li><input type="checkbox" name="chose" value="1">游泳</li> 7 <li><input type="checkbox" name="chose" value="1"> 打羽毛球</li> 8 <li><input type="checkbox" name="chose" value="1"> 打排球</li> 9 </ul> 10 </div> 11 <input type="button" id="all" value="全选/全不选"> 12 <input type="button" value="全选" class="btn" id="selectAll"> 13 <input type="button" value="全不选" class="btn" id="unSelect">
Jquery的代码是这样实现的:(参考某大神EdieLei的回复 博客链接 http://www.cnblogs.com/edielei)
1 var a = true; 2 $(function(){ 3 //全选/全不选 4 $('#all').click(function(){ 5 ck(a); 6 a = a?false:true; 7 }); 8 //全选 9 $('#selectAll').click(function(){ck(true);}); 10 //全不选 11 $('#unSelect').click(function(){ck(false);}); 12 }); 13 function ck(b){ 14 $('input[name="chose"]').prop('checked',b); 15 }
当然each的方法也可以:
1 $("#list :checkbox").each(function () { 2 3 if ($(this).attr("checked") == true) { 4 $(this).attr("checked",false) ; 5 } 6 else { 7 $(this).attr("checked",true); 8 } 9 10 });