开发者社区> 游客wcasviwmrc34i> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Javascript实现全选按钮

简介: Javascript实现全选按钮
+关注继续查看

效果:有全选选项框和单个选项框,选择全选框,所有的的选择都打上的钩,取消全选钩所有的都去掉了钩,如果取消其中某一个的钩,那么全选的钩也取消,反之全选所有的选项,那么全选的钩就会打上。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript_test</title>
<script src="test.js" type="text/javascript"></script>
<link href="test.css" type="text/css" rel="stylesheet">
</link>
<style>
* {
    margin: 0;
    padding: 0;
}
.div_center_ab {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14%;
    height: 30%;
    border: 2px solid #6A7006;
    transform: translate(-50%, -50%);
}
.div_center_re {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
</head>
<body >
<div class=" div_center_ab">
  <div class="div_center_re"> 全选
    <input type="checkbox" id="boxall">
    <br>
    <hr>
    选项1
    <input type="checkbox">
    <br>
    选项2
    <input type="checkbox">
    <br>
    选项3
    <input type="checkbox">
    <br>
    选项4
    <input type="checkbox">
    <br>
  </div>
</div>
<script>
 var boxall=document.getElementById("boxall")
 var boxse=document.querySelectorAll("input:nth-child(n+2)")
 console.log(boxall)
 console.log(boxse)
 boxall.onclick=function(){
    var checkall=boxall.checked
    for(var i=0;i<boxse.length;i++)
  boxse[i].checked=checkall;
 
 }
 //判断不同选项是否被选中
 for(var i=0;i<boxse.length;i++){
  boxse[i].onclick=function(){
    var flag=true
         for(var j=0;j<boxse.length;j++){
    if(boxse[j].checked===false){
    flag=false
    break
   } 
   }
 
  boxall.checked=flag  
 
  }
 }
</script>
</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
js实现多选、全选、反选、取消选择(篇一)
js实现多选、全选、反选、取消选择(篇一)
0 0
JavaScript实现复选框全选与全不选的效果
JavaScript实现复选框全选与全不选的效果
0 0
纯js全选/全不选
纯js全选/全不选
0 0
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
0 0
通过JavaScript 实现简单的全选、不全选的思想
实现的思路是,全选的按钮是否勾取,勾取后通过for循环来得到每一个按钮,赋值上全选按钮的勾取状态。
0 0
【JavaScript】案例 :复选框全选-全不选&省市二级联动以及课外扩展
本期主要介绍案例 :复选框全选-全不选&省市二级联动以及课外扩展
0 0
【JavaScript】DOM查询之全选练习
通过上期【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例(附源码)再接一个全选小练习。
0 0
杨老师课堂之JavaScript案例全选、全不选、及反选
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/79906084      JavaScript案例之全选、全不选、及反选 效果图: 思路:     1.
834 0
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: <!-- <input type="text" id="text"> --> 请选择省份: <select name="" id="provinces"> <!-- <option value="江苏省">江苏省</option>
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载