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>

转载于:https://www.cnblogs.com/llz1314/p/5777563.html

JS编写全选，复选按钮相关推荐

html复选框全选怎么实现,js html css实现复选框全选与反选
本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 html+css+js实现复选框全选与反选 table,tr,td { border:1px solid red; } fu ...
复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选
复选框全选与全不选效果逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...
【react】全选复选框和单个复选框联动功能
需求: 全选复选框显示情况:点击全选复选框时,所有单个复选框状态变为被勾选状态:并且每一单个复选框边框颜色为蓝色:当点击取消全选复选框被勾选的状态时,所有单个复选框状态恢复初始状态(未被勾选状态). ...
js实现跨页勾选复选框
在这里插入代码片# 前台列表页面实现跨页勾选复选框思路:分页是后台服务端分页.做不到实时性.所以在js中可以封装一个js Map,每勾选一个将勾选的主键放到Map中,取消勾选时将其从Map中移除.不 ...
html 下拉多选框代码,js实现下拉复选框效果（代码实例）
本章给大家带来用js实现下拉复选框效果(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 先看看效果: 下面我们看看代码: HTML代码: HTML CSS JavaScri ...
选择所有选项的多选复选框列表或复选框下拉列表
目录介绍现场演示使用代码将选择转换为多选复选框介绍复选框列表对于允许用户在选择框中选择多个选项很有用.但在这种情况下,可以通过按住控制(ctrl)按钮选择多个选项,用户讨厌这个.您可以使用 ...
使复选框选中_勾选复选框单元格变色，自动计数，在Excel中是如何实现的？
Excel中,我们经常会使用复选框来打勾打叉,这是复选框最基本的功能,相信很多小伙伴都会,但今天我跟大家分享的是复选框的其他操作技巧,勾选复选框变色,统计人数. 下图中,我们要利用复选框是否打钩来确定 ...
html checkbox 多选根据数据库来显示选取和未选取,前端框架（2）DIV多选复选框框的封装和MySql数据库存取...
前端框架(二)DIV多选复选框框的封装和MySql数据库存取图可以包含的寓意和含义是文字不能比拟的,先有一个效果图你也就知道这篇文章的主要内容是关于什么问题的,省去了一大堆文字的累述,看下面这张图: ...
zTree点击文字勾选复选框
1.问题背景系统利用zTree插件生成下拉复选树,点击文字勾选复选框 2.实现源码 <!DOCTYPE html><html><head> <title&g ...
el-table中可选可不选复选框
需求:实现el-table中可选可不选复选框加多一行:selectable="checkSelectSet",checkSelectSet根据自己命名 <el-table- ...

JS编写全选，复选按钮

JS编写全选，复选按钮相关推荐

最新文章

热门文章