選中取消選中所有複選框與另一個複選框使用jquery

Question

我使用jquery-1.9.1.js 在我的html頁面中，它第一次運行良好。

就像http://jsfiddle.net/pzCcE/1/

有人可以幫助我提高了嗎？

<table id="tab1"> 
    <input type="checkbox" name="checkAll" id="checkAll">全選 
    <input type="checkbox" name="book" id="book" value="book1">book1 
    <input type="checkbox" name="book" id="book" value="book2">book2 
    <input type="checkbox" name="book" id="book" value="book3">book3 
    <input type="checkbox" name="book" id="book" value="book4">book4 
    <input type="checkbox" name="book" id="book" value="book5">book5</table> 

$(function() { 
    $("#tab1 #checkAll").click(function() { 
     if ($("#tab1 #checkAll").is(':checked')) { 
      $("#tab1 input[type=checkbox]").each(function() { 
       $(this).attr("checked", true); 
      }); 

     } else { 
      $("#tab1 input[type=checkbox]").each(function() { 
       $(this).attr("checked", false); 
      }); 
     } 
    }); 
}); 

Answer 1

變化

$(this).attr("checked", true); 

到

$(this).prop("checked", true); 

jsFiddle example

我其實只是回答了另一個問題，這是與此類似。每.prop()文檔：

的.prop（）方法是設置的 性質，特別是設置多個屬性時的值的便利方式，使用由函數返回的值 ，或在設置上的多個元素值 一次。它應該用於設置selectedIndex，tagName，nodeName， nodeType，ownerDocument，defaultChecked或defaultSelected。由於 jQuery 1.6，這些屬性不能再使用.attr（） 方法進行設置。它們沒有相應的屬性，只有 屬性。

屬性通常會影響DOM元素的動態狀態，而無需更改序列化的HTML屬性 。示例包括輸入元素的值 屬性，輸入和 按鈕的禁用屬性或複選框的選中屬性。 應使用.prop（）方法 來設置禁用和檢查，而不是使用.attr（） 方法。應使用.val（）方法獲取和設置 值。

Answer 2

你應該使用同名的類，ID必須是唯一的！

<input type="checkbox" name="checkAll" id="checkAll">全選 
<input type="checkbox" name="book" class="book" value="book1">book1 
<input type="checkbox" name="book" class="book" value="book2">book2 
<input type="checkbox" name="book" class="book" value="book3">book3 
<input type="checkbox" name="book" class="book" value="book4">book4 
<input type="checkbox" name="book" class="book" value="book5">book5</table> 

$(function() { 
    $("#checkAll").click(function() { 
     if ($("#checkAll").is(':checked')) { 
      $(".book").prop("checked", true); 
     } else { 
      $(".book").prop("checked", false); 
     } 
    }); 
}); 

Answer 3

隨着j08691的樣子回答到以後的事也..

這完全是沒有意義的，因爲一個ID必須爲你的DOM的定義中是唯一的創造像#ID #ID選擇。

<input type="checkbox" name="checkAll" class="checkAll"> 

$("#tab1 .checkAll").click(function() { 

Answer 4

添加這也太.... FOR .....如果一個複選框（ID：書）處於未選中狀態意味着它會導致主複選框（ID：checkAll）是未選

$("#tab1 #book").click(function() { 
    if($('#book').is(':checked')) 
    { 
    $("#checkAll").prop("checked", false);   
    } 
}); 

Answer 5

$("input[name='select_all_photos']").click(function() { 
     var checked = $(this).is(':checked'); 
     $("input[name^='delete_']").each(function() { 
      $(this).prop("checked", checked); 
     }); 
    }); 

不要打擾做一個if語句。

Answer 6

由於OP需要檢查取消選中所有複選框的基礎上的另一個複選框id=全選。

即@ j08691上面提供是好的，但它缺乏一兩件事，那就是解決方案，當列表中的任何其他複選框選中去解決不取消的id=全選複選框。

因此，我提出一個解決方案，根據id=全選複選框檢查/取消選中所有複選框，如果其他任何複選框未選中，則複選框id=全選將取消選中。如果用戶手動點擊其他所有複選框，則還應檢查複選框id=全選以反映這種關係。

OP使用相同的ID爲多個複選框違反了DOM規則。 Element IDs should be unique within the entire document.

---

因此，下面的代碼涵蓋了這種場景的所有方面。

HTML

<table> 
    <tr> 
     <td> 
     <input type="checkbox" name="checkAll" id="checkAll">全選 (ALL) 
     <input type="checkbox" name="book" id="book_1" value="book1">book1 
     <input type="checkbox" name="book" id="book_2" value="book2">book2 
     <input type="checkbox" name="book" id="book_3" value="book3">book3 
     <input type="checkbox" name="book" id="book_4" value="book4">book4 
     <input type="checkbox" name="book" id="book_5" value="book5">book5 
     </td> 
    </tr> 
</table> 

JQuery的

$(document).ready(function() { 

    $('#checkAll').click(function() { 
     $('input:checkbox').not(this).prop('checked', this.checked); 
    }); 

    $("[id*=book_]").change(function() { 
     if ($('input[id*=book_][type=checkbox]:checked').length == $('input[id*=book_][type=checkbox]').length) { 
      $('#checkAll').prop('checked', true); 
     } else { 
      $('#checkAll').prop('checked', false); 
     } 
    }); 

}); 

屬性選擇器[名稱* = 「值」]

選擇具有與所指定的屬性的元素的說明一個包含給定s的值ubstring。

因此$('#checkAll')只返回我的父複選框，我選中/取消選中所有複選框。

而$('[id$=book_]')會將除全選（全選）複選框外的所有複選框都返回給我。然後在父複選框的基礎上，我選中/取消選中所有其他複選框。

---

我還檢查複選框的長度其他然後父（全選）複選框，如果所有的其他複選框被校驗，那麼我檢查父（全選）複選框。所以這是交叉檢查所有可能的情況並且不會錯過任何情況的方式。

Demo working JSFiddle here.

Answer 7

我只是簡化@ j08691答案

$("#checkAll").click(function() { 
 
     var allChecked = $(this); 
 
     $("#tab1 input[type=checkbox]").each(function() { 
 
     $(this).prop("checked", allChecked.is(':checked')); 
 
     }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tab1"> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" name="checkAll" id="checkAll">Select all 
 
     <input type="checkbox" name="book" id="book" value="book1">book1 
 
     <input type="checkbox" name="book" id="book" value="book2">book2 
 
     <input type="checkbox" name="book" id="book" value="book3">book3 
 
    </td> 
 
    </tr> 
 
</table>

Answer 8

的最快方式。並保存一些線路

$(".ulPymnt input[type=checkbox]").each(function(){     
     $(this).prop("checked", !$(this).prop("checked"))     
    }) 

Answer 9

`change click to ch $("#checkAll").click(); to $("#checkAll").change(); 

> Blockquote 

$(function() { 
$("#checkAll").change(function() { 
    if ($("#checkAll").is(':checked')) { 
    $(".book").prop("checked", true); 
    } else { 
    $(".book").prop("checked", false); 
    } 
}); 
});`