JavaScript 多选事件触发

最新推荐文章于 2023-06-24 14:57:56 发布

一心不安

最新推荐文章于 2023-06-24 14:57:56 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42700595/article/details/83380270

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script language="JavaScript">
        document.write("<br>-------------多选事件触发------------------<br>");
        //1.当所有选项全部勾选时触发全选按钮事件
        function chageAll(){
            var x = 0;          //勾选位数
            var cblist = document.getElementsByName("like");
            var checkAll = document.getElementById("checkAll");
            for(i=0;i<cblist.length;i++){
                if(cblist[i].checked){
                    x++;
                }else{
                    x--;
                }
            }
            if(x==4){
                checkAll.checked=true;      //多选框全部选中时结果返回true
            }else{
                checkAll.checked=false;     //多选框没有全部选中时结果返回false
            }
        }
         //2. 点击（全选/全不选）按钮触发勾选选项事件
        function chageCheck(element){
            var cblist = document.getElementsByName("like");    //获取所有name为like的多选控件
            if(element.checked){
                for(i=0;i<cblist.length;i++){
                    cblist[i].checked=true;
                }
            }else{
                for(i=0;i<cblist.length;i++){
                    cblist[i].checked=false;
                }
            }
        }
        //3.反选事件
        function unChecked() {
            var cblist = document.getElementsByName("like");    //获取所有name为like的多选控件
            for(i=0;i<cblist.length;i++){
                if(cblist[i].checked){
                    cblist[i].checked=false;
                }else{
                    cblist[i].checked=true;
                }
            }
            chageAll();
        }

    </script>
</head>
<body>
    <p><input type="checkbox" name="like" οnchange="chageAll()"/>JavaScript</p>
    <p><input type="checkbox" name="like" οnchange="chageAll()"/>JavaBean</p>
    <p><input type="checkbox" name="like" οnchange="chageAll()"/>JavaOop</p>
    <p><input type="checkbox" name="like" οnchange="chageAll()"/>JavaWeb</p>
    <p><input type="checkbox" id="checkAll" οnclick="chageCheck(this)"/>全选/全不选</p>
    <p><input type="button" value="反选" οnclick="unChecked()" /></p>
</body>
</html>

一心不安

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 多选事件触发

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script language="JavaScript"&gt;
复制链接

扫一扫

专栏目录