Day1-js-多选框多选与取消多选实例

一、实现方法一：

　　　①效果图

　　　②知识点：

　　　　　　　　1、这里使用了 getElementsByName 函数，主要是因为 input的标识符就是通过name来设定的，又因为是对多个

　　　　　　　　　　这样的元素进行设置样式的话，就要在element后面加上复数的s了

　　　　　　　　2、用于点击一下变成全选的，再点击一下就全部取消了，所以就是一个布尔类型的

　　　　　　　　　　故点击一下的话，就用

 checkAll=!checkAll;

　　　　③完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var checkAll=false;
        function allcheck(){
            checkAll=!checkAll;
            let inputs = document.getElementsByName('checkbox');
            for(var i=0;i<inputs.length;i++)
            inputs[i].checked=checkAll;
        }
    </script>
</head>
<body>
    看书：<input type="checkbox" name="checkbox" value="1"><br>
    聊天：<input type="checkbox" name="checkbox" value="2"><br>
    打码：<input type="checkbox" name="checkbox" value="3"><br>
    看剧：<input type="checkbox" name="checkbox" value="4"><br>
    <button onclick="allcheck()">全选/取消</button>
</body>
</html>

二、实现方法二（它吧全选和取消按钮分开了，并且添加了一个alert来让人确定）

　　　　①效果图

　　　　②知识点：

　　　　　　　　1、这个就是给点击事件的函数传入的是input的name

 <button onclick="checkboxed('checkbox')">全选</button>
    <button onclick="uncheckboxed('checkbox')">取消全选</button>

　　　　　　　　2、如果要全选的话，就吧全部的checkbox属性的input.checked="checked" 或则就是=“”，表示空

objNameList[i].checked="checked";    全选

objNameList[i].checked="";                取消全选

三、JavaScript 复选框实现全选、取消全选、反选实例：

①效果图：

②知识点：

　　　　1、在html中同时给点击事件的函数，复选框的name 和 type=全选/取消全选/反选

　　　　2、就是如果本身就是选中的了，那么点击“全选框”是没用的，而点击“取消全选”和“反选”就会让它变成没选中的

　　　　　　　　如果本身是没选中的，同理的

　　　　　　===就是利用了这样的逻辑关系来实现的

③完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function opcheckedboxed(objName,type){
            var objNameList=document.getElementsByName(objName);
            if(null!=objNameList){
                for(var i=0;i<objNameList.length;i++){
                    if(objNameList[i].checked==true)
                    {if(type!='checkall')
                        objNameList[i].checked=false;
                    }
                    else{
                        if(type!='uncheckall'){
                            objNameList[i].checked=true;
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    看书：<input type="checkbox" name="checkbox" value="1"><br>
    聊天：<input type="checkbox" name="checkbox" value="2"><br>
    打码：<input type="checkbox" name="checkbox" value="3"><br>
    看剧：<input type="checkbox" name="checkbox" value="4"><br>
    <button onclick="opcheckedboxed('checkbox','checkall')">全选</button>
    <button onclick="opcheckedboxed('checkbox','uncheckall')">取消全选</button>
    <button onclick="opcheckedboxed('checkbox','reversecheck')">反选</button>
   
</body>
</html>

View Code