zaznaczenie odznacz Wszystkie pola wyboru z innym pojedynczym polem wyboru używają jquery

Question

Używam jquery-1.9.1.js Na mojej stronie html działa to po raz pierwszy.

podobnie jak http://jsfiddle.net/pzCcE/1/

Czy ktoś mógłby mi pomóc go poprawić?

<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

Zmień

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

do

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

jsFiddle example

I właściwie tylko jedno pytanie odpowiedział, że był podobny do tego. Na tych .prop() dokumentów:

.prop() metoda jest w wygodny sposób w celu ustawienia wartości podczas ustawiania wielu właściwości szczególnie właściwości -oparciu o wartości zwróconych przez funkcję lub nastaw w wielu elementów w raz. Należy go używać podczas ustawiania selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked lub defaultSelected. Od jQuery 1.6 te właściwości nie mogą być już ustawiane za pomocą metody .attr() . Nie mają odpowiednich atrybutów i mają tylko właściwości .

Właściwości ogólnie wpływają na stan dynamiczny elementu DOM bez zmiany zmienionego HTML-a. Przykłady obejmują wartość wartości elementów wejściowych, wyłączoną właściwość wejść i przycisków lub zaznaczoną właściwość pola wyboru. Metoda .prop() powinna być używana do ustawiania wyłączonych i sprawdzonych zamiast metody .attr() . Aby uzyskać i ustawić wartość należy użyć metody .val().

Answer 2

Powinieneś używać zajęć o tej samej nazwie, identyfikatory MUSZĄ być unikalne!

<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

Z odpowiedzi na j08691 patrzeć w następującej rzeczy także ..

To zupełnie nie ma sensu, aby utworzyć selektor jak ID ID ponieważ identyfikator musi być unikatowa w obrębie swojej DOM definicji.

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

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

Answer 4

Dodaj to zbyt .... DLA ..... jeśli jedno pole (id: książka) jest zaznaczone oznacza spowoduje to pole wyboru głównego (ID: checkAll) być odznaczone

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

Answer 5

Nie przejmuj się instrukcją if.

Answer 6

Ponieważ PO wymaga zaznaczenia odznacz wszystkie pola wyboru na podstawie innego pola wyboru: id=全選.

Rozwiązanie, które zostało przedstawione powyżej @ j08691 jest dobre, ale brakuje jednej rzeczy, a to oznacza, że ​​rozwiązanie nie usuwa zaznaczenia z pola wyboru id=全選, gdy jakiekolwiek inne pole wyboru na liście zostanie niezaznaczone.

Proponuję więc rozwiązanie, które sprawdza/odznacza wszystkie pola wyboru na podstawie pola wyboru id=全選, a jeśli zaznaczono inne pole wyboru, pole wyboru id=全選 zostanie odznaczone. Jeśli użytkownik ręcznie klika wszystkie pozostałe pola wyboru, pole wyboru id=全選 również powinno być zaznaczone, aby odzwierciedlić związek.

OP przy użyciu tego samego identyfikatora dla wielu pól wyboru, co jest niezgodne z regułami DOM. Element IDs should be unique within the entire document.

---

więc następujący kod obejmuje wszystkie aspekty tego rodzaju scenariusza.

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); 
     } 
    }); 

}); 

Opis selektora atrybutu [imię * = "wartość"]

Wybiera elementów, które mają określoną cechę z wartość zawierająca dane s ubrań.

Tak więc $('#checkAll') zwraca mi tylko pole wyboru nadrzędny, w którym zaznaczam/odznaczam wszystkie pola wyboru.

I $('[id$=book_]') zwraca mi wszystkie pola wyboru, oprócz pola wyboru nadrzędnego (全 選). Następnie na podstawie nadrzędnego pola wyboru zaznaczam/odznaczam wszystkie pozostałe pola wyboru.

---

ja również sprawdza długość pola wyboru innych następnie macierzystych (全 選) pole wyboru, jeśli wszystkie pozostałe pola wyboru są sprawdzić następnie sprawdzić rodzica (全 選) wyboru. Jest to sposób na sprawdzenie wszystkich możliwych warunków i nie przegap żadnego scenariusza.

Demo working JSFiddle here.

Answer 7

Właśnie uproszczone @ j08691 odpowiedź

$("#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

najszybszy sposób. i zapisać niektórych liniach

$(".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); 
    } 
}); 
});`