JS编写全选,复选按钮


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选</title>
</head>
<body>
<input type="button" name="" value="全选" id="one">
<input type="button" name="" value="反选" id="two">
<input type="checkbox" name="" id="three">
<ul>
<li>
<input type="checkbox" name="li">
</li>
<li>
<input type="checkbox" name="li">
</li>
<li>
<input type="checkbox" name="li">
</li>
<li>
<input type="checkbox" name="li">
</li>
<li>
<input type="checkbox" name="li">
</li>
<li>
<input type="checkbox" name="li">
</li>
</ul>
<script type="text/javascript">
var btn1 = document.getElementById('one')
var btn2 = document.getElementById('two')
var btn3 = document.getElementById('three')
var li = document.getElementsByName('li')
btn1.onclick = function(){
for(var i = 0;i < li.length;i++){
if(li[i].checked ==0 ){
li[i].checked = 1;
}
}
isAll();
}

btn2.onclick = function(){
for(var f = 0;f < li.length;f++){
if (li[f].checked == 1) {
li[f].checked = 0;
}else{
li[f].checked = 1;
}
}
isAll();
}

  // 每个checkbox状态修改时判断是否全选
for(var i = 0;i < li.length;i++){
li[i].onchange = function(){
isAll();
}
}

  // 判断当前是否全选
function isAll(){
var num = 0;
for(var i = 0;i < li.length;i++){
if(li[i].checked == 1){
num++
}
}
if(num == 6){
btn3.checked = 1;
}else{
btn3.checked = 0;
}
}
</script>

</body>
</html>

优质内容筛选与推荐>>
1、dee
2、进化--从无到有
3、Java公开课-01.类和对象
4、linux基础命令(一)
5、解决springboot集成redis时出现乱码


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号