Jquery多选框全选功能示例

最新推荐文章于 2021-04-07 11:00:24 发布

csmzl

最新推荐文章于 2021-04-07 11:00:24 发布

阅读量682

点赞数

分类专栏： JS和JQuery 文章标签： jquery 全选多选框全选按钮选中全部

本文链接：https://blog.csdn.net/csmzl/article/details/72677631

版权

JS和JQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

Jquery多选框全选按钮功能示例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>多选框全选功能示例</title>
        <script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
    </head>

    <body>
        <div id="inputContainer">
            <label>1<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
            <label>2<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
            <label>3<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
            <label>4<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
            <label>5<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
            <label>6<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
            <label>7<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
            <label>8<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
            <label>9<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
        </div>
        <label>全选<input onclick="CheckAllJob()" type="checkbox" id="ckAllJobs" class="ckAllInput" /></label>
        <script type="text/javascript">
        //note: 若用attr修改checked属性，导致该属性是动态生成的，此时应该用prop来修改属性，若用attr方法则不会生效。
            var ckTotal = $("#inputContainer input").length;
            function CheckAllJob(){
                var objInput = $("#inputContainer input");
                if ($("#ckAllJobs").prop("checked") == true) {
                    $(".ckAllInput").prop("checked","checked");
                } else{
                    $(".ckAllInput").removeProp("checked");
                }
            }
            function CkInput(){
                var ckNum = $("#inputContainer input:checked").length;
                if (ckNum == ckTotal) {
                    $("#ckAllJobs").prop("checked","checked");
                }else{
                    $("#ckAllJobs").removeProp("checked");
                }
            }
        </script>
    </body>

</html>

csmzl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery多选框全选功能示例

Jquery多选框全选按钮功能示例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>多选框全选功能示例</title> <script type="text/javascript" src="../js/jquery-1.12.1.js"></script> </hea
复制链接

扫一扫

专栏目录