Pole wyboru Jquery zmienia się po kliknięciu innego pola wyboru - javascript, jquery, checkbox

Mam listę takich pól wyboru:

<input type="checkbox" name="cat" class="parent" value="cat1" />Category 1</input>
<input type="checkbox" name="foo" class="child" value="1" />SubCategory 1</input>
<input type="checkbox" name="foo" class="child" value="1" />SubCategory 2</input>

<input type="checkbox" name="cat" class="parent" value="cat2" />Category 2</input>
<input type="checkbox" name="foo" class="child" value="3" />SubCategory 3</input>
<input type="checkbox" name="foo" class="child" value="4" />SubCategory 4</input>

Chciałbym zmienić pole wyboru „Kategoria 1”, aby było zaznaczone za każdym razem, gdy kliknę jego podkategorie bez zaznaczania pola wyboru inne kategorie.

Jak mogę to zrobić?

Odpowiedzi:

Użycie atrybutu danych do ustawienia kota. wystarczy pobrać ten formularz ze zdarzenia sprawdzania elementów potomnych:

    <input type="checkbox" name="cat" class="parent" value="cat1" id="category1" />Category 1</input>
<input type="checkbox" name="foo" class="child" value="1" data-cat="1" />SubCategory 1</input>
<input type="checkbox" name="foo" class="child" value="2" data-cat="1" />SubCategory 2</input>

....

    $(".child").change(function() {
var cat = $(this).data("cat");
$("#category" + cat).prop("checked", true);
});

Wprowadziłem niewielką zmianę w twoich znacznikach i zawinąłem zestawy w div każdy.

Teraz mój kod odznacza również rodzica, jeśli wszystkie jego potomne koty są odznaczone, a gdy zaznaczysz rodzica, wszystkie potomne koty są zaznaczone / odznaczone

Live Demo

$(function() {
$(".child").on("click",function() {
$parent = $(this).prevAll(".parent");
if ($(this).is(":checked")) $parent.prop("checked",true);
else {
var len = $(this).parent().find(".child:checked").length;
$parent.prop("checked",len>0);
}
});
$(".parent").on("click",function() {
$(this).parent().find(".child").prop("checked",this.checked);
});
});

Możesz zidentyfikować podkategorie jako cat2_1, cat2_2 itd., A następnie uzyskać dostęp do elementu kategorii za pomocą elementu podkategorii, dzieląc identyfikator przez _ aby uzyskać identyfikator kategorii.

Inna odpowiedź

$(document).ready(function () {
$("INPUT").click(function () {
if ($(this).attr("class") == "parent") {
var v = this.value;
var check = this.checked;
var ok = false;

$("INPUT").each(function () {
if (v == this.value) {
ok = true;
} else {
if (this.name=="cat") ok = false;
else if (ok && this.name == "foo") {
this.checked=check;
}
}

});

}


});
});