搜尋

首頁 >web前端 >js教程 >jQuery中取得checkbox選取項等操作及注意事項_jquery

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

WBOY
WBOY原創
2016-05-16 17:12:381324瀏覽

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

測試的checkbox程式碼片段：

複製代碼


代碼如下:



           
           
           
           
           
           
           
       

一：首先來說第一點，取得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程式碼：




複製程式碼


程式碼如下: