js实现checkbox全选、不选与反选的方法
本文实例讲述了js实现checkbox全选、不选与反选的方法。分享给大家供大家参考。具体分析如下:
一、思路:
1. 获取元素
2. 给全选 不选 反选添加点击事件
3. 用for循环checkbox
4. 把checkbox的checked设置为true即实现全选
5. 把checkbox的checked设置为false即实现不选
6. 通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态。
二、html代码:
<input type="button" value="全选" id="sele"/> <input type="button" value="不选" id="setinterval"/> <input type="button" value="反选" id="clear"/> <div id="checkboxs"> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <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>
三、js代码:
<script> window.onload=function(){ var sele=document.getElementById('sele');//获取全选 var unsele=document.getElementById('setinterval');//获取不选 var clear=document.getElementById('clear');//获取反选 var checkbox=document.getElementById('checkboxs');//获取div var checked=checkbox.getElementsByTagName('input');//获取div下的input //全选 sele.onclick=function(){ for(i=0;i<checked.length;i++){ checked[i].checked=true } } //不选 unsele.onclick=function(){ for(i=0;i<checked.length;i++){ checked[i].checked=false } } //反选 clear.onclick=function(){ for(i=0;i<checked.length;i++){ if(checked[i].checked==true){ checked[i].checked=false } else{ checked[i].checked=true } } } } </script>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
JavaScript面向对象三个基本特征实例详解【封装、继承与多态】
这篇文章主要介绍了JavaScript面向对象三个基本特征,结合实例形式详细分析了JavaScript面向对象三个基本特征封装、继承与多态的概念、原理、用法与操作注意事项,需要的朋友可以参考下2020-05-05JS promise 的回调和 setTimeout 的回调到底谁先执行
本文主要介绍了JS promise 的回调和 setTimeout 的回调到底谁先执行,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-01-01浅谈JavaScript的push(),pop(),concat()方法
下面小编就为大家带来一篇浅谈JavaScript的push(),pop(),concat()方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-06-06
最新评论