checkbox复选框过滤并动态修改

最新推荐文章于 2022-11-29 15:45:28 发布

前端成长营

最新推荐文章于 2022-11-29 15:45:28 发布

阅读量252

点赞数

文章标签： javascript input checkbox jquery

本文链接：https://blog.csdn.net/weixin_43617604/article/details/113991137

版权

代码可复制预览

.prop(“checked”, false) 改状态
.attr(‘checked’, true) 改dom

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="checkbox" name="uids" value="61">
    <input type="checkbox" name="uids" value="62">
    <input type="checkbox" name="uids" value="63">
    <input type="checkbox" name="uids" value="61">
    <input type="checkbox" name="uids" value="62">
    <input type="checkbox" name="uids" value="63">
    <input type="checkbox" name="uids" value="61">
    <input type="checkbox" name="uids" value="62">
    <input type="checkbox" name="uids" value="63">
    <input type="checkbox" name="uids" value="61">
    <input type="checkbox" name="uids" value="62">
    <input type="checkbox" name="uids" value="63">
    <input type="checkbox" name="uids" value="61">
    <input type="checkbox" name="uids" value="62">
    <input type="checkbox" name="uids" value="63">
    <input type="checkbox" name="uids" value="61">
    <input type="checkbox" name="uids" value="62">
    <input type="checkbox" name="uids" value="63">

    <script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>
    <script>
      var currentStatus=''
        $('input').each(function (i, v) {
            $(v).click(function () {
                currentStatus=$(v).is(':checked')
                console.log(currentStatus);
                
                for (let i = 0; i < $('input').length; i++) {
                    if ($('input').eq(i).val() == $(v).val()) {
                        $('input').eq(i).prop("checked", currentStatus)
                        $('input').eq(i).attr('checked', true)
                    } else {
                        $('input').eq(i).prop('checked', false)
                        $('input').eq(i).removeAttr('checked')
                    }
                }
            })
        })

    </script>

</body>

</html>