jQuery中取得checkbox選取項等操作及注意事項_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程式碼：

複製程式碼

程式碼如下:

   
   
   

    <script><BR> $(function () {<BR> //获取选中项(FF和chrome下无效)<BR> $('#huoqu').click(function () {</script>

                //$("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');
                    }
                });
            });
        });

   

   

    checkbox" name="abc" value="一年級" id="in1" checked="checked" />一年級
            二年級
            三年級
            四年級
            五年級
            六年級
            七年級 " name="abc" value="八年級" id="in8" />八年級