checkbox操作

2018-06-27 09:04:57来源：博客园阅读 ()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label for="btnq">
    <input type="checkbox" id="btnq" class="btnQ"/>全选</label>
<button class="del">删除</button>
<button class="queren">确认</button>
<button class="btnHZ">获取选中的值</button>
<div>
    <label for="userName">
        <input type="checkbox" id="userName" name="test" class="cb_fruit" value="1"/>userName
    </label>
    <label for="userPhone">
        <input type="checkbox" id="userPhone" name="test" class="cb_fruit" value="2"/>userPhone
    </label>
    <label for="userAddress">
        <input type="checkbox" id="userAddress" name="test" class="cb_fruit" value="3"/>userAddress
    </label>
    <label for="userSize">
        <input type="checkbox" id="userSize" name="test" class="cb_fruit" value="4"/>userSize
    </label>
    <label for="userColer">
        <input type="checkbox" id="userColer" name="test" class="cb_fruit" value="5"/>userColer
    </label>
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script>
    $(function () {

        //获取选中的值
        var intName = document.getElementsByName("test");
        $(".btnHZ").click(function () {
            intVal()
        });
        function intVal(){
            var intArr = [];
            for (k in intName) {
                if (intName[k].checked) {
                    intArr.push(intName[k].value)
                }
            }
            console.log(intArr)
        }
        //确认
        $(".queren").click(function () {
            if ($("input[name='test']:checked").length == 0) {
                alert("请选中信息")
            }else{
                intVal();
            }

        });
        //全选和反选
        $(".btnQ").click(function () {
            $("input[name='test']").prop("checked", this.checked);
        });
        /*挨个选完选中后全选选中，取消一个选中全选取消选中*/
        $(".cb_fruit").change(function () {
            if ($("input[name='test']:checked").length == $(".cb_fruit").length) {
                $("#btnq").prop("checked", true);
            } else {
                $("#btnq").prop("checked", false);
            }
        });

        //删除
        $(".del").click(function () {
            if ($("input[name='test']:checked").length == 0) {
                alert("请选中删除项")
            } else {
                $("div input").each(function () {
                    if ($(this).is(':checked')) {
                        $(this).remove();
                    }
                })
            }
        });
    })
</script>