js实现checkbox全选、不选与反选的方法

前端之家收集整理的这篇文章主要介绍了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代码

Boxs"> Box"/>
Box"/>
Box"/>
Box"/>
Box"/>
Box"/>
Box"/>
Box"/>
Box"/>
Box"/>
Box"/>
Box"/>
Box"/>
Box"/>
Box"/>
Box"/>

三、js代码

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
}
}
}
}

希望本文所述对大家的javascript程序设计有所帮助。

原文链接:https://www.f2er.com/js/55840.html

猜你在找的JavaScript相关文章