jQuery中取得checkbox選取項等操作及注意事項

首頁

web前端

js教程

jQuery中取得checkbox選取項等操作及注意事項_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:12 PM

jquery

1. 取得checkbox的選取項
2. checkbox選項的全選反選操作

測試的checkbox程式碼片段：

複製代碼

代碼如下:

            一年級
            二年級
            三年級
            四年級
            五年級 checkbox" name="abc" value="六年級" id="in6" />六年級

            七年級
            八年級

一：首先來說第一點，取得checkbox的選取項。網路上搜到的大部分方法都使用each來取得：

複製程式碼

程式碼如下:

$("input[name='check>
$("input[name='check,box'box'boxs. 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("");                    //alert(this.value);

🎜> }); ,);

在chrome下的效果：

二：checkbox的全選反選操作：

由於這兩個比較簡單，所以我就直接上程式碼吧：

複製碼代碼如下:

//全選/取消全選

//全選/取消全選

$("input[name='abc']").attr("checked, 'true');

                $("input[name='abc']").removeAttr("checked");


            //反選
            input[name='abc']").each(function () {
                   Attr("checked");
                    } else {
     ", 'true');
                    }
        🎜>

再總結一下：

jquery版本在1.3之前時，取得checkbox的選取項目的操作：

複製碼代碼如下:

checked]").each(function () {

                    alert(this.value);

jquery版本在1.3之後時，取得checkbox的選取項目的操作：

複製碼

代碼如下: 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 + " ");
                });
            });

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