jQuery中獲取checkbox選中項(xiàng)等操作及注意事項(xiàng)

2019-11-20 21:35:46

字體：大中小

供稿：網(wǎng)友

1. 獲取checkbox的選中項(xiàng)
2. checkbox選項(xiàng)的全選反選操作

用于測(cè)試的checkbox代碼段：

<div>
            <input type="checkbox" name="abc" value="一年級(jí)" id="in1" checked="checked" /><label for="in1">一年級(jí)</label>
            <input type="checkbox" name="abc" value="二年級(jí)" id="in2" /><label for="in2">二年級(jí)</label>
            <input type="checkbox" name="abc" value="三年級(jí)" id="in3" /><label for="in3">三年級(jí)</label>
            <input type="checkbox" name="abc" value="四年級(jí)" id="in4" /><label for="in4">四年級(jí)</label>
            <input type="checkbox" name="abc" value="五年級(jí)" id="in5" /><label for="in5">五年級(jí)</label>
            <input type="checkbox" name="abc" value="六年級(jí)" id="in6" /><label for="in6">六年級(jí)</label>
            <input type="checkbox" name="abc" value="七年級(jí)" id="in7" /><label for="in7">七年級(jí)</label>
            <input type="checkbox" name="abc" value="八年級(jí)" id="in8" /><label for="in8">八年級(jí)</label>
        </div>

一：首先來(lái)說(shuō)第一點(diǎn)，獲取checkbox的選中項(xiàng)。網(wǎng)上搜到的大部分方法使用each來(lái)獲取：

復(fù)制代碼代碼如下:

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

但在測(cè)試時(shí)我就遇到了問(wèn)題，這種方法在IE下可以獲取，但在firefox和chrome瀏覽器下就無(wú)法獲取當(dāng)前的選中項(xiàng)，測(cè)試效果如下：

IE下的測(cè)試效果（我的是IE10）:

IE10下的效果：

chrome瀏覽器下的效果：

通過(guò)在google上搜索，找到了原因：

網(wǎng)址： Jquery 選中多少個(gè)input CheckBox問(wèn)題，IE正常，F(xiàn)F和Chrome無(wú)法取到值

因?yàn)槲矣玫膉query版本是1.7.2的，所以這里我得用 :checked 來(lái)獲取才行，修改后的代碼：

復(fù)制代碼代碼如下:

//獲取選中項(xiàng)
            $('#huoqu2').click(function () {
                $('#show').html("");
                $("input[name='abc']:checked").each(function () {
                    //alert(this.value);
                    $('#show').append(this.value + "  ");
                });
            });

在chrome下的效果：

二：checkbox的全選反選操作：

由于這兩個(gè)比較簡(jiǎn)單，我就直接上代碼吧：

復(fù)制代碼代碼如下:

//全選/取消全選
            $('#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');
                    }
                });
            });

再總結(jié)一下：

jquery版本在1.3之前時(shí)，獲取checkbox的選中項(xiàng)的操作：

復(fù)制代碼代碼如下:

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

jquery版本在1.3之后時(shí)，獲取checkbox的選中項(xiàng)的操作：

復(fù)制代碼代碼如下:

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

附完整測(cè)試Demo代碼：

復(fù)制代碼代碼如下:

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

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

            //獲取選中項(xiàng)
            $('#huoqu2').click(function () {
                $('#show').html("");
                $("input[name='abc']:checked").each(function () {
                    //alert(this.value);
                    $('#show').append(this.value + " ");
                });
            });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="checkbox" name="abc" value="一年級(jí)" id="in1" checked="checked" /><label for="in1">一年級(jí)</label>
            <input type="checkbox" name="abc" value="二年級(jí)" id="in2" /><label for="in2">二年級(jí)</label>
            <input type="checkbox" name="abc" value="三年級(jí)" id="in3" /><label for="in3">三年級(jí)</label>
            <input type="checkbox" name="abc" value="四年級(jí)" id="in4" /><label for="in4">四年級(jí)</label>
            <input type="checkbox" name="abc" value="五年級(jí)" id="in5" /><label for="in5">五年級(jí)</label>
            <input type="checkbox" name="abc" value="六年級(jí)" id="in6" /><label for="in6">六年級(jí)</label>
            <input type="checkbox" name="abc" value="七年級(jí)" id="in7" /><label for="in7">七年級(jí)</label>
            <input type="checkbox" name="abc" value="八年級(jí)" id="in8" /><label for="in8">八年級(jí)</label>
        </div>
        <br />
        <input type="button" id="huoqu" value="獲取選中項(xiàng)（FF和chrome下無(wú)效）" />
        <input type="button" id="quanxuan" value="全選/取消全選" />
        <input type="button" id="fanxuan" value="反選" />
        <input type="button" id="huoqu2" value="獲取選中項(xiàng)" />
       <br />
        選中項(xiàng)： <div id="show">