JQ实现全选、全不选、反选、偶数选中、奇数选中

最新推荐文章于 2024-04-17 09:12:12 发布

原创最新推荐文章于 2024-04-17 09:12:12 发布 · 501 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery

前端专栏收录该内容

39 篇文章

订阅专栏

这篇博客详细介绍了如何使用jQuery（JQ）来操作HTML中的复选框。内容包括全选、取消全选、选中所有奇数项、选中所有偶数项以及反选的功能实现。特别指出，在选取奇数项时，应当使用`input:checkbox:nth-child(odd)`而非`:odd`过滤器，因为`:odd`在索引上会从1开始，导致实际选中的是偶数项。同时，博客还解释了CSS选择器的工作原理以及在JavaScript中修改复选框属性时应当使用`prop`方法的原因。

在这里插入图片描述

html

<div>
            <input type="button" id="btn1" value="全选">
            <input type="button" id="btn2" value="取消全选">
            <input type="button" id="btn3" value="选中所有奇数">
            <input type="button" id="btn4" value="选中所有偶数">
            <input type="button" id="btn5" value="反选">
            <br>
            <input type="checkbox" name="checkbox" value="checkbox1">
            checkbox1
            <input type="checkbox" name="checkbox" value="checkbox2">
            checkbox2
            <input type="checkbox" name="checkbox" value="checkbox3">
            checkbox3
            <input type="checkbox" name="checkbox" value="checkbox4">
            checkbox4
            <input type="checkbox" name="checkbox" value="checkbox5">
            checkbox5
            <input type="checkbox" name="checkbox" value="checkbox6">
            checkbox6
            <input type="checkbox" name="checkbox" value="checkbox7">
            checkbox7
            <input type="checkbox" name="checkbox" value="checkbox8">
            checkbox8
        </div>

JQ

  //ps：这里用的修改属性是prop方法，不是attr，attr适合修改自定义属性，像含有checked、selced、id等固有属性适合用prop
            $('#btn1').click(function () {
                $('input:checkbox').prop('checked', true);
            });
            $('#btn2').click(function () {
                $('input:checkbox').prop('checked', false);
            });
            $('#btn3').click(function () {
                $('input:checkbox:nth-child(odd)').prop('checked', true);
            });
            // 这里不是input:checkbox:odd
            $('#btn4').click(function () {
                $('input:checkbox:nth-child(even)').prop('checked', true);
            });
            $('#btn5').click(function () {
                $('input:checkbox').each(function () {
                    /* if ($(this).prop('checked') == true) {
                        $(this).prop('checked', false);
                    } else {
                        $(this).prop('checked', true);
                    } */
                    $(this).prop('checked', !$(this).prop('checked'));//简化写法
                });
            });

需要注意的是
选中奇数行不是使用
input:checkbox:odd
而是
input:checkbox:nth-child(odd)
因为**:odd是选取索引是奇数的所有元素，索引从1开始**
如果直接用：odd过滤器的话选中索引就是13579…
而这里checkbox是按123456789，这样正常排序
相当于奇数过滤器变成了偶数。’1对应的是2,3对应的是4’

：evev同理
不过**：even选取索引是偶数的所有元素，索引从0开始**

这里就只可以使用
input:checkbox:nth-child(odd)
因为：nth-child索引下的是没有0的，是从1开始

借此在css中，我以为可以这样选中
在这里插入图片描述
发现根本定位不了第二个复选框
因为nth-of-type是先返回寻找前面元素，就像这里的是寻找input，
而不是input[type:checkbox]这个属性选择器,所以这里在就去定位里面自定义的2，这个索引值，发现第二个input type是button，所以就根本匹配不到了。