Mam dynamiczny formularz z kilkoma polami wyboru. Chcę utworzyć metodę „zaznacz wszystko”, która po kliknięciu automatycznie sprawdza wszystkie pola w formularzu.
[x] select all //<input type="checkbox" id="select-all"> Select all
[] item 1 //<input type="checkbox" id="1" class="checkbox1" value="1">
[] item 2 //<input type="checkbox" id="2" class="checkbox1" value="2">
[submit]
Mój jQuery wygląda następująco:
$(document).ready(function(){
$("#select-all").click(function() {
if (this.checked)
{
console.log("Check detected");
$(".checkbox1").each(function() {
console.log("Checking the item with value:" + this.value );
$(this).prop("checked", true);
console.log(this);
});
} else {
console.log("not checked");
}
});
});
Dane wyjściowe mojej konsoli:
> Check detected
> Checking the item with value:1
> <input type="checkbox" id="1" class="checkbox1" value="1">
> Checking the item with value:2
> <input type="checkbox" id="2" class="checkbox1" value="2">
Jestem w stanie przeglądać każdy element, ale nie jestem pewien, jak ustawić pole wyboru jako zaznaczone.
Częścią, z którą walczę, jest faktyczne ustawienie stanu sprawdzonego, wiem, że muszę użyć: .prop („zaznaczone”, prawda), jednak, co mam użyć dla rzeczywistego elementu? $ (this) oczywiście nie działa ...
$(this).prop("checked", true);
Odpowiedzi:
0 dla odpowiedzi № 1Użyj tego prostego kodu
$(".checkAll").change(function(){
$(".checkbox1").prop("checked", this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Check all</label>
<input type="checkbox" class="checkAll" />
<br/><br/>
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
0 dla odpowiedzi nr 2
Masz na myśli #select-all
tak jak (this.checked)
, Musisz odnosić się jako $(this)
.
Po drugie możesz użyć :sprawdzone aby dowiedzieć się, czy jest zaznaczone, czy nie.
Po trzecie, nie musisz zapętlać $(".checkbox1")
. jquery dopasuje wszystkie elementy i zaktualizuje atrybut.
Poniżej znajduje się fragment, który może być pomocny
$(document).ready(function() {
$("#select-all").click(function() {
if ($(this).is(":checked")) {
console.log("Check detected");
$(".checkbox1").prop("checked", true)
} else {
$(".checkbox1").prop("checked", false)
}
});
// If select-all is selected and if one check box is unchecked ,
//then select-all will be unchecked
$(".checkbox1").click(function(event) {
if ($(this).is(":checked")) {
// #select-all must be checked when all checkbox are checked
} else {
if ($("#select-all").is(":checked")) {
$("#select-all").prop("checked", false)
}
}
})
});
0 dla odpowiedzi № 3
kod js
$(".checkbox1").click(function(event) {
var _this = $(this);
if (!_this.prop("checked")) {
$("#select-all").prop("checked", false)
}
})
$("#select-all").click(function() {
var _this = $(this);
var _value = _this.prop("checked");
console.log("Check detected");
$(".checkbox1").each(function() {
console.log("Checking the item with value:" + this.value);
$(this).prop("checked", _value);
console.log(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select-all"> Select all
<input type="checkbox" id="1" class="checkbox1" value="1">
<input type="checkbox" id="2" class="checkbox1" value="2">
0 dla odpowiedzi nr 4
Aby odpowiedzieć na to pytanie. Wypróbowałem różne oferowane rozwiązania i okazały się one nie działać. Jednak potem zdałem sobie sprawę, że z powodu użycia Jquery Uniform muszę dodać dodatkowy kawałek kodu, aby ekran działał poprawnie:
Ten post był pomocny.
Dziękuję wszystkim, którzy poświęcili czas na udzielenie odpowiedzi.
Mój ostatni kod:
$(document).ready(function(){
$("#select-all").click(function() {
if (this.checked)
{
$(".checkbox1").prop("checked", true);
} else {
$(".checkbox1").prop("checked", false);
}
$.uniform.update(".checkbox1");
});
});