用js实现全选和反选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><button class="Select">全选</button><button class="Select">反选</button><ul><li><input type="checkbox">打篮球</li><li><input type="checkbox">看电影</li><li><input type="checkbox">看书</li><li><input type="checkbox">书法</li><li><input type="checkbox">唱歌</li><li><input type="checkbox">徒步旅行</li></ul><script>var Btns=document.getElementsByClassName('Select');var Tags=document.getElementsByTagName('input');for(var i=0;i<Btns.length;i++){Btns[i].onclick=function(){if(this.innerHTML=='全选'){for(var k=0;k<Tags.length;k++){Tags[k].checked='checked';}}if (this.innerHTML=="反选"){for(var j=0;j<Tags.length;j++){if(Tags[j].checked){// if(Tags[j].checked=true){Tags[j].checked='';}else{Tags[j].checked='checked';}} }}}</script>
</body>
</html>

显示：

改进全选为一个复选框，如果全选的话，那么全选的复选框也会有对勾，

<!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" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>全选-反选</title><script type="text/javascript">window.onload=function(){function $(id){return document.getElementById(id);}var cks=$('favors').getElementsByTagName('input');$('chkAll').onclick=function(){for(var i=0;i<cks.length;i++){cks[i].checked=this.checked;}}$('reverse').onclick=function(){var flag = true;for(var i=0;i<cks.length;i++){cks[i].checked=!cks[i].checked;if(!cks[i].checked){flag = false;}}$('chkAll').checked = flag;}for(var i=0; i<cks.length; i++){cks[i].onclick=function(){var flag=true;for(var j=0; j<cks.length; j++){if(!cks[j].checked){flag = false;break;}}$('chkAll').checked = flag;}}}</script>
</head>
<body><h2>请选择您的兴趣爱好</h2><input type="checkbox"  id="chkAll" /> <label for="chkAll">全选</label><input type="button" value="反选" id="reverse" /><ul id="favors"><li><input type="checkbox" value="" />打篮球</li><li><input type="checkbox" value="" />踢足球</li><li><input type="checkbox" value="" />看电影</li><li><input type="checkbox" value="" />看书</li><li><input type="checkbox" value="" />书法</li><li><input type="checkbox" value="" />唱歌</li><li><input type="checkbox" value="" />徒步旅行</li></ul>
</body>
</html>

用js实现全选和反选相关推荐

JS实现全选、反选、不选
JS实现全选.反选.不选效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head><meta charset=" ...
Ext js 4 全选和反选
Ext版本:4.2 相信经常做Grid的一定遇到全选和反选吧,虽然Ext里有SelectionMode可以直接使用,但是面对较复杂的业务,SelectionMode也力不从心于是自己定义一个Chec ...
js实现全选和反选功能
最近没事做,就用js写了一个复选框选择全选时,下面的按钮也都会选择上,当下面的选框被全选时,全选按钮也会被选中;还实现了一个反选功能,可供大家参考,如果大家有好的建议也可以给我留言,我们一起学习... ...
原生js实现全选和反选的功能 --冯浩的博客
思路:首先我们获取节点遍历每个节点获取到checked的属性然后我们通过改变checked的属性改变选中的状态全选的时候我们让他们都为true 反选的时候我们使用!达到效果本次使用到的知识点有: ...
JS实现全选跟反选
示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
java做全选反选功能_[Java教程]js实现全选反选
[Java教程]js实现全选反选 0 2017-04-04 00:00:12 在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码快递 ...
html复选框全选怎么实现,js html css实现复选框全选与反选
本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 html+css+js实现复选框全选与反选 table,tr,td { border:1px solid red; } fu ...
纯js实现复选框的全选、反选与获取选中复选框的值
实现效果如下: 全选状态: 取消全选: 获取选中的复选框的值: 下面开始上代码! html <div><h2>爱好</h2><hr><form a ...

用js实现全选和反选

用js实现全选和反选相关推荐

最新文章

热门文章