js实现checkbox全选、不选与反选的方法
更新时间：2015年02月09日 09:07:21 作者：peerless
这篇文章主要介绍了js实现checkbox全选、不选与反选的方法,以实例形式详细分析了实现的思路及对应的html与js代码的实现过程,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
window.open被浏览器拦截导致页面无法弹出，a标签的弹出就不会被浏览器拦截，下面有个不错的示例，大家可以学习下2014-04-04
数组和字符串类型对象的方法我特容易搞混淆,所以把他列出来，免得每次取查。2009-09-09
这篇文章主要为大家详细介绍了javascript函数，帮助大家更好的理解js函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了JS实现鼠标滑过折叠与展开菜单效果代码,涉及JavaScript基于鼠标事件动态改变页面元素样式的相关实现技巧,非常具有实用价值,需要的朋友可以参考下2015-09-09
获取图片尺寸(不设置宽高)及放大图片：利用了IE的私有属性防止图片放大失真严重！感兴趣的朋友可以参考下2013-09-09
下面小编就为大家带来一篇JavaScript判断数组是否存在key的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
在本篇文章里小编给大家分享的是关于javascript中的with语句学习笔记及用法，有需要的朋友们可以学习下。2020-02-02
这篇文章主要介绍了JS去掉字符串前后空格或去掉所有空格的用法,需要的朋友可以参考下2017-03-03
下面是自己写的一个简单的函数，用于截取固定长度的字符串，中英文都适用.若有不妥之处还请高手指正2013-11-11
最近在写一个微信小程序,有一个需求是点击一个按钮后,出现一个输入框,然后根据用户的输入再进行操作,所以这篇文章主要给大家介绍了关于微信小程序实现弹出输入框的相关资料,需要的朋友可以参考下2023-09-09
最新评论