如何用jq库实现反选和全选；

最新推荐文章于 2022-04-07 20:22:27 发布

原创最新推荐文章于 2022-04-07 20:22:27 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

该博客展示了如何利用jQuery实现HTML页面中复选框的全选和反选功能。通过监听checkbox的点击事件，动态改变其他复选框的状态，并更新全选按钮的文本。示例代码包括HTML结构和JavaScript逻辑，适用于前端开发中的交互实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <script src="./jquery-3.6.0.min.js"></script>

 <div id="content">
        <p> <label for="qx" class="qx"><input class="s1"  type="checkbox" id="qx">全选</label></p>
        <p> <label for="wxm"><input class="s2" type="checkbox" id="wxm">王小明</label></p>
        <p> <label for="lq"><input class="s2" type="checkbox" id="lq">李强</label></p>
        <p> <label for="zy"><input class="s2" type="checkbox" id="zy">张雨</label></p>
        <p> <label for="lzq"><input class="s2" type="checkbox" id="lzq">李志强</label></p>
        <p> <label for="fx"><input  class="s3"type="checkbox" id="fx">反选</label></p>
    </div>

html标签

<script>
    $(function() {
        //全选和全不选；
        $('.s1').click(function() {
            $('.s3').prop('checked', false); //清掉s3；
            console.log(this.checked)
            if (this.checked) {
                $('.s2').prop('checked', true);
                //获取当前点击事件的父标签，修改父标签里面的文本节点，替换；
                this.parentNode.replaceChild(document.createTextNode('全不选'), this.parentNode.lastChild);

            } else {
                $('.s2').prop('checked', false);
                this.parentNode.replaceChild(document.createTextNode('全选'), this.parentNode.lastChild);
            }
            console.log(this.checked);
        })
    })

    //反选；
    $('.s3').click(function() {
        $('.s1').prop('checked', false); //清掉s1
        var s4 = document.querySelectorAll('.s2');
        console.log(s4[1].checked);
        for (var i = 0; i < s4.length; i++) {
            if (s4[i].checked) {
                $(s4[i]).prop('checked', false);
            } else {
                $(s4[i]).prop('checked', true);
            }
        }

    })
</script>

js实现