JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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代码:

SELE"/> Tinterval"/> checkboxs"> checkbox"/>
checkbox"/>
checkbox"/>
checkbox"/>
checkbox"/>
checkbox"/>
checkbox"/>
checkbox"/>
checkbox"/>
checkbox"/>
checkbox"/>
checkbox"/>
checkbox"/>
checkbox"/>
checkbox"/>
checkbox"/>

三、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程序设计有所帮助。

大佬总结

以上是大佬教程为你收集整理的js实现checkbox全选、不选与反选的方法全部内容,希望文章能够帮你解决js实现checkbox全选、不选与反选的方法所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。