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>
相关文章
|
8天前
|
移动开发 JavaScript 前端开发
分享88个表单按钮JS特效,总有一款适合您
分享88个表单按钮JS特效,总有一款适合您
33 1
|
8天前
|
存储 移动开发 JSON
分享86个表单按钮JS特效,总有一款适合您
分享86个表单按钮JS特效,总有一款适合您
36 1
|
8天前
|
JavaScript 前端开发 算法
JavaScript中的排他算法实现按钮单选
JavaScript中的排他算法实现按钮单选
22 0
|
7月前
|
前端开发 JavaScript 容器
|
8月前
|
JavaScript 前端开发
使用JavaScript,点击按钮一个打开新的窗体
使用JavaScript,点击按钮一个打开新的窗体
|
9月前
|
JavaScript 前端开发
JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)
JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)
222 0
|
8天前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
10 0
|
8天前
|
JavaScript
JS实现一键点击按钮复制文本
【5月更文挑战第6天】JS实现一键点击按钮复制文本
|
8天前
|
移动开发 JSON JavaScript
分享76个表单按钮JS特效,总有一款适合您
分享76个表单按钮JS特效,总有一款适合您
33 5
|
8天前
|
前端开发 JavaScript
分享几个精美的网页按钮样式,纯CSS实现,无JS(拿来即用)
分享几个精美的网页按钮样式,纯CSS实现,无JS(拿来即用)
39 0