【JS】复选框的全选和取消全选
2017-02-09 10:44
435 查看
测试代码如下:
第一种:纯原生版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="first"> <ul class="frtInfo"> <li> <label><input type="checkbox" name="wp" value="wpa"/>液体</label> </li> <li> <label><input type="checkbox" name="wp" value="wpb"/>粉末</label> </li> <li> <label><input type="checkbox" name="wp" value="wpc"/>仿牌</label> </li> <li> <label><input type="checkbox" name="wp" value="wpd"/>纯电池</label> </li> <li> <label><input type="checkbox" name="wp" value="wpe"/>危险品</label> </li> <li> <label><input type="checkbox" name="wp" value="wpd"/>配套电池</label> </li> <li> <label><input name="allChecked" id="allChecked" onclick="DoCheck()" class="allChk" type="button" value="全选/取消"/></label> </li> </ul> </div> <script type="text/javascript"> function DoCheck(){ var ch=document.getElementsByName("wp"); if(document.getElementsByName("allChecked")[0].checked==true){ for(var i=0;i<ch.length;i++){ ch[i].checked=true; } }else{ for(var i=0;i<ch.length;i++){ ch[i].checked=false; } } } </script> </body> </html>
第二种:jQuery版
<!DOCTYPE Html> <html> <head> <meta charset 4000 ="UTF-8"> <title>全选/全取消</title> </head> <body> <div> 新闻<input type="checkbox"/><br/> 电影<input type="checkbox"/><br/> 音乐<input type="checkbox"/><br/> 娱乐<input type="checkbox"/><br/> 八卦<input type="checkbox"/><br/> 直播<input type="checkbox"/><br/> </div> <input type="checkbox" onclick="selectAll(this);" />全选/全取消<br/> <script src="js/jquery-1.11.3.js"></script> <script type="text/javascript"> function selectAll(checkbox) { $('input[type=checkbox]').prop('checked', $(checkbox).prop('checked')); } </script> </body> </html>
相关文章推荐
- js checkbox全选 反选 取消全部设置表单checkbox复选框勾选
- 使用js实现复选框的全选、取消功能
- js checkbox全选 反选 取消全部设置表单html复选框勾选
- JS如何实现对name是数组的复选框的全选和反选以及取消选择
- JS实现checkbox全选/全不选,单个复选框取消不全选
- js实现多个复选框的全选与取消
- js实现复选框的全选和取消全选效果
- js全选,全选以后,如果选中其中一个,全选效果取消,如果复选框全部选中,全选按钮自动也被选中
- vue.js实现复选框全选和全取消的功能
- 用js实现复选框的全选和取消全选的代码
- js--复选框--全选、反选、取消
- 全选复选框和取消所有复选框 jquery全选复选框 js全选复选框
- JS复选框checkbox:父复选框全选全取消子选框和子选框选则而父选框自动选中的代码
- JS实现复选框(Checkbox)全选和取消 --ASP.NET中实例运用
- JS实现多个复选框全选
- js 实现复选框全选和反选
- 扩展GridView控件(4) - 联动复选框(复选框的全选和取消全选)
- 通过JS将复选框做成单选框一样,选中还可以取消
- 扩展TreeView控件(1) - 联动复选框(复选框的全选和取消全选)
- 扩展TreeView控件(1) - 联动复选框(复选框的全选和取消全选)(转)