复选框(全选/全不选/反选)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>多选框(全选/全不选)</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        ul,
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="mydiv">
        <input id="button1" type="button" value="批量查岗" />
        <div id="i1">
            <ul id="list">
                <li id="l1" class="l11" data-proCode="208" data-hostNum="1">选项一</li>
                <li id="l2" class="l12" data-proCode="209" data-hostNum="2">选项二</li>
                <li id="l3" class="l13" data-proCode="210" data-hostNum="3">选项三</li>
            </ul>
        </div>
    </div>
    <script>
        $(document).on('click', '#button1', function () {
            // 创建一个标签,将标签添加到指定标签里面
            var tag1 = '<input type="checkbox" name="item" />';
            $("#list li").each(function () {
                $(this).prepend(tag1);
            });
            $("#button1").remove();
            var tag2 =
                '<input type="checkbox" id="all"><input type="button" value="全选" class="btn" id="selectAll"><input type="button" value="全不选" class="btn" id="unSelect"><input type="button" value="反选" class="btn" id="reverse"><input type="button" value="获得选中的所有值" class="btn" id="getValue">';
            $('#mydiv').prepend(tag2);

        });
    </script>

    <!-- 多选框的全选和全不选 -->
    <script>
        $(function () {
            //全选或全不选
            $(document).on("click", "#all", function () { //$(document).on('click', '#all', function () {});这种选择器能获取动态加载的html属性
                if (this.checked) {
                    $("#list :checkbox").prop("checked", true);
                } else {
                    $("#list :checkbox").prop("checked", false);
                }
            });
            //全选
            var isCheckAll = $(document).on("click", "#selectAll", function () {
                $("#list :checkbox,#all").prop("checked", true);
            });
            //全不选
            $(document).on("click", "#unSelect", function () {
                $("#list :checkbox,#all").prop("checked", false);
            });
            //反选
            $(document).on("click", "#reverse", function () {
                $("#list :checkbox").each(function () {
                    $(this).prop("checked", !$(this).prop("checked"));
                });
                allchk();
            });
            //设置全选复选框,根据复选个数更新全选框状态
            $(document).on("click", "#list :checkbox", function () {
                allchk();
            });
            //获取选中选项的值
            $(document).on("click", "#getValue", function () {
                //alert(1);
                var params = [];
                var hosts =  $("#list :checkbox:checked");
                if (hosts.length>0) {
                    hosts.each(function (i) {
                        var proParam = $(this).parent("li").attr("data-proCode");
                        var hostParam = $(this).parent("li").attr("data-hostNum");
                        params.push({ "proCode": proParam, "hostNum": hostParam });
                    });
                    var json = JSON.stringify(params);
                    alert(json);
                }else{
                    alert("请至少选择主机/控制器!");
                }
                
            });
        });

        function allchk() {
            var chknum = $("#list :checkbox").length; //选项总个数
            var chk = 0;
            $("#list :checkbox").each(function () {
                if ($(this).prop("checked") == true) {
                    chk++;
                }
            });
            if (chknum == chk) { //全选
                $("#all").prop("checked", true);
            } else { //不全选
                $("#all").prop("checked", false);
            }
        }
    </script>
</body>

</html>

禁用双击事件

$('#buttonPanLeft').unbind('dblclick');
$('#buttonPanLeft').dblclick(function(e){
    e.stopPropagation();
    e.preventDefault();
    return false;
});
posted @ 2019-03-27 20:50  Mouer404  阅读(299)  评论(0编辑  收藏  举报