JS实现全选跟反选

示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

ul {

list-style: none;

}

</style>

</head>

<body>

<input type="checkbox" name="sex2" id="check">全选/全不选

<input type="checkbox" name="sex2" id="checkid">反选

<hr>

<ul class="ul">

<li>

<input type="checkbox" name="sex" id="checkbox">苹果

</li>

<li>

<input type="checkbox" name="sex" id="checkbox">梨

</li>

<li>

<input type="checkbox" name="sex" id="checkbox">葡萄

</li>

<li>

<input type="checkbox" name="sex" id="checkbox">香蕉

</li>

<li>

<input type="checkbox" name="sex" id="checkbox">榴莲

</li>

</ul>

<script>

// 全选

var check = document.getElementById("check");

var inputall = document.querySelectorAll(".ul input")

check.onclick = function() {

for (let i = 0; i < inputall.length; i++) {

inputall[i].checked = check.checked

}

}

checkid.onclick = function() {

for (let i = 0; i < inputall.length; i++) {

inputall[i].checked = !inputall[i].checked

}

}

// 给每一个水果选项绑定一个单击事件

for (let i = 0; i < inputall.length; i++) {

inputall[i].onclick = function() {

var coust = 0; //用来统计被选中的input标签的个数

for (let j = 0; j < inputall.length; j++) {

if (inputall[j].checked == true) {

coust++

}

}

// 如果count的值等于水果的个数,全选要选中

if (coust == inputall.length) {

check.checked = true

} else {

check.checked = false

}

}

}

</script>

</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-8" ...
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实现全选跟反选相关推荐

最新文章

热门文章

JS实现 全选跟反选

JS实现 全选跟反选相关推荐

最新文章

热门文章

JS实现全选跟反选

JS实现全选跟反选相关推荐