一.JQuery实现全选功能:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>checkbox</title> </head> <body> <input type="checkbox" name="btn" id="btn"/><label for="btn">全选/全不选</label><br/> <input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">选项1</label><br/> <input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">选项2</label><br/> <input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">选项3</label><br/> <input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">选项4</label><br/> <input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">选项5</label><br/> <input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">选项6</label><br/> <a href="javascript:;" id="btn2">反选</a> </body> </html> <script type="text/javascript" src="/js/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ var checkboxes = $('input[name=choose]'); var btn = $('#btn'); var btn2 = $('#btn2'); btn.click(function(){ checkboxes.attr('checked',this.checked); }); checkboxes.click(function(){ var flag = true; checkboxes.each(function(){ if(!this.checked) flag = false; }); btn.attr('checked',flag); }); btn2.click(function(){ var flag = true; checkboxes.each(function(){ this.checked = !this.checked; if(!this.checked) flag = false; }); btn.attr('checked',flag); }); }); </script>
二.JavaScript实现全选功能:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>checkbox</title> </head> <body> <input type="checkbox" name="btn" id="btn"/><label for="btn">全选</label><br/> <input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">选项1</label><br/> <input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">选项2</label><br/> <input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">选项3</label><br/> <input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">选项4</label><br/> <input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">选项5</label><br/> <input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">选项6</label><br/> <a href="javascript:;" id="btn2">反选</a> </body> </html> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn'); var oBtn2 = document.getElementById('btn2'); var oInput = document.getElementsByName('choose'); for(var i = 0;i < oInput.length; i++){ oInput[i].onclick = function(){ this.checked ? allCheck() : oBtn.checked = false; }; }; //全选 oBtn.onclick = function(){ for(var i = 0;i < oInput.length; i++){ oBtn.checked ? oInput[i].checked = true : oInput[i].checked = false; }; }; //反选 oBtn2.onclick = function(){ for(var i = 0;i < oInput.length; i++){ oInput[i].checked = !oInput[i].checked; }; allCheck(); }; }; //判断是否全选 function allCheck(){ var oBtn = document.getElementById('btn'); var oInput = document.getElementsByName('choose'); var allCheck = true; for(var i = 0;i < oInput.length; i++){ if(!(oInput[i].checked)) allCheck = false; }; allCheck ? oBtn.checked = true : oBtn.checked = false; }; </script>
相关推荐
s遍历页面中所有的checkbox实现全选功能 s遍历页面中所有的checkbox实现全选功能
DataGridView表头添加checkbox实现全选反选
高级控件(datagridview等)中加入checkbox实现全选和反选经典例子
本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码,供大家参考,具体内容如下 (item, key=index> class=listli > <p>{{ item.name
checkbox.html 博文链接:https://crazymud.iteye.com/blog/426702
成功的实现了,datagrid中嵌套checkbox实现全选的功能。分享代码供大家分享。项目为flex3。
HtML javascritp checkbox 全选HtML javascritp checkbox 全选
JQuery实现checkbox的全选取消全选
简单代码实现android的多选、全选、反选功能。介绍功能实现的全过程以及需要注意的地方。简单代码分享,希望能给大家带来一些帮助!
NULL 博文链接:https://taomujian.iteye.com/blog/294748
Checkbox多选全选
页面上通过一个checkbox实现全选与反选
winform DataGridView表头带CheckBox全选;winform DataGridView表头带CheckBox全选
资源名称:JS实现checkbox的全选和反选资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
checkBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——js
Datagridview控件没有全选或取消全选的复选框,本资源用VB2015通过扩展DataGridViewColumnHeaderCell类,在列头绘制一个复选框checkbox控件,通过定义checkbox鼠标单击事件来实现行的全选或取消全选。checkbox还可以...
DevExpress 实现checkbox全选效果,内有主要代码,虽不能直接运行,但是都有详细的注释说明
ExpandableListView中group和child自定义视图带CheckBox,实现child全选、部分选中功能,同时实现类似邮件群发的用户选择功能,选中的用户在EditText中显示,点击后移除. 更新: 1. ExpandableListView勾选后生成的...
flex AdvancedDataGrid实现checkBox全选功能 实现全选,多选功能
WPF之CheckBox组的全选设计,知识点有位运算和枚举的Flags特性