jQuery中获取checkbox选中项等操作及注意事项

首页

web前端

js教程

jQuery中获取checkbox选中项等操作及注意事项_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:12 PM

jquery

1. 获取checkbox的选中项
2. checkbox选项的全选反选操作

用于测试的checkbox代码段：

复制代码代码如下:

            一年级
            二年级
            三年级
            四年级
            五年级
            六年级
            七年级
            八年级

一：首先来说第一点，获取checkbox的选中项。网上搜到的大部分方法使用each来获取：

复制代码代码如下:

$("input[name='checkbox'][checked]").each(function () {
    alert(this.value);
})

但在测试时我就遇到了问题，这种方法在IE下可以获取，但在firefox和chrome浏览器下就无法获取当前的选中项，测试效果如下：

IE下的测试效果（我的是IE10）:

IE10下的效果：

chrome浏览器下的效果：

通过在google上搜索，找到了原因：

网址： Jquery 选中多少个input CheckBox问题，IE正常，FF和Chrome无法取到值

因为我用的jquery版本是1.7.2的，所以这里我得用 :checked 来获取才行，修改后的代码：

复制代码代码如下:

//获取选中项
            $('#huoqu2').click(function () {
                $('#show').html("");
                $("input[name='abc']:checked").each(function () {
                    //alert(this.value);
                    $('#show').append(this.value + "  ");
                });
            });

在chrome下的效果：

二：checkbox的全选反选操作：

由于这两个比较简单，我就直接上代码吧：

复制代码代码如下:

//全选/取消全选
            $('#quanxuan').toggle(function () {
                $("input[name='abc']").attr("checked", 'true');
            }, function () {
                $("input[name='abc']").removeAttr("checked");
            });

            //反选
            $('#fanxuan').click(function () {
                $("input[name='abc']").each(function () {
                    if ($(this).attr("checked")) {
                        $(this).removeAttr("checked");
                    } else {
                        $(this).attr("checked", 'true');
                    }
                });
            });

再总结一下：

jquery版本在1.3之前时，获取checkbox的选中项的操作：

复制代码代码如下:

                $("input[name='abc'][checked]").each(function () {
                    alert(this.value);
                });

jquery版本在1.3之后时，获取checkbox的选中项的操作：

复制代码代码如下:

                $("input[name='abc']:checked").each(function () {
                    alert(this.value);
                });
 

附完整测试Demo代码：

复制代码代码如下:

                //$("input[name='abc'][checked]").each(function () {
                //    alert(this.value);
                //});

                $('#show').html("");
                $("input[name='abc'][checked]").each(function () {
                    //alert(this.value);
                    $('#show').append(this.value + " ");
                });
            });

            //获取选中项
            $('#huoqu2').click(function () {
                $('#show').html("");
                $("input[name='abc']:checked").each(function () {
                    //alert(this.value);
                    $('#show').append(this.value + " ");
                });
            });