У меня есть следующий HTML-код:
<input type="checkbox" id="ckbCheckAll" />
<p id="checkBoxes">
<input type="checkbox" class="checkBoxClass" id="Checkbox1" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox2" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox3" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox4" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox5" />
<br />
</p>
Когда пользователь проверяет ckbCheckAll все флажки должны быть отмечены. Также у меня есть следующий код jquery:
$(document).ready(function () {
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").attr('checked', this.checked);
});
});
Когда я вижу свою страницу в браузере, я получаю следующий результат: при первом нажатии на ckbCheckAll были ckbCheckAll все флажки (что правильно). Во втором щелчке на ckbCheckAll все флажки были ckbCheckAll (что правильно). Но с 3-й попытки ничего не произошло! также в 4-й попытке ничего не произошло и так далее.
В чем проблема?
Использовать prop
$(".checkBoxClass").prop('checked', true);
или снимите флажок:
$(".checkBoxClass").prop('checked', false);
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
Обновлена ссылка JSFiddle: http://jsfiddle.net/sVQwA/1/
Используйте код ниже.
$('#globalCheckbox').click(function(){
if($(this).prop("checked")) {
$(".checkBox").prop("checked", true);
} else {
$(".checkBox").prop("checked", false);
}
});
$('.checkBox').click(function(){
if($(".checkBox").length == $(".checkBox:checked").length) {
$("#globalCheckbox").prop("checked", true);
}else {
$("#globalCheckbox").prop("checked", false);
}
});
Вот простой способ сделать это:
HTML:
<input type="checkbox" id="selectall" class="css-checkbox " name="selectall"/>Selectall<br>
<input type="checkbox" class="checkboxall" value="checkbox1"/>checkbox1<br>
<input type="checkbox" class="checkboxall" value="checkbox2"/>checkbox2<br>
<input type="checkbox" class="checkboxall" value="checkbox3"/>checkbox3<br>
JQuery:
$(document).ready(function(){
$("#selectall").click(function(){
if(this.checked){
$('.checkboxall').each(function(){
$(".checkboxall").prop('checked', true);
})
}else{
$('.checkboxall').each(function(){
$(".checkboxall").prop('checked', false);
})
}
});
});
используйте этот
if (this.checked)
$(".checkBoxClass").attr('checked', "checked");
else
$(".checkBoxClass").removeAttr('checked');
также вы можете использовать prop, пожалуйста, проверьте http://api.jquery.com/prop/
Попробуйте следующий простой код:
$('input[type=checkbox]').each(function() { this.checked = true; });
Источник: Как сбросить все флажки, используя jQuery или чистый JS?
Вместо этого используйте prop() -
$(document).ready(function () {
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").each(function(){
if($(this).prop("checked", true)) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
});
});
НО мне нравится @dmk гораздо более компактный ответ и + 1'd его
$(document).ready(function() {
$('#ckbCheckAll').click(function() {
$('.checkBoxClass').each(function() {
$(this).attr('checked',!$(this).attr('checked'));
});
});
});
ИЛИ
$(function () {
$('#ckbCheckAll').toggle(
function() {
$('.checkBoxClass').prop('checked', true);
},
function() {
$('.checkBoxClass').prop('checked', false);
}
);
});
Попробуйте это
$(document).ready(function () {
$("#ckbCheckAll").click(function () {
$("#checkBoxes input").prop('checked', $(this).prop('checked'));
});
});
Это должно сделать это:)
$(document).ready(function(){
$('#ckbCheckAll').click(function(event) {
if($(this).is(":checked")) {
$('.checkBoxClass').each(function(){
$(this).prop("checked",true);
});
}
else{
$('.checkBoxClass').each(function(){
$(this).prop("checked",false);
});
}
});
});
$(document).ready(function () {
$(".class").on('click', function () {
$(".checkbox).prop('checked', true);
});
});
Позвольте мне иметь следующие флажки
<input type="checkbox" name="vehicle" value="select All" id="chk_selall">Select ALL<br>
<input type="checkbox" name="vehicle" value="Bike" id="chk_byk">bike<br>
<input type="checkbox" name="vehicle" value="Car" id="chk_car">car
<input type="checkbox" name="vehicle" value="Bike" id="chk_bus">Bus<br>
<input type="checkbox" name="vehicle" value="scooty" id="chk_scooty">scooty
Вот простой код, чтобы выбрать все и отключить все, когда флажок selectall нажмет
<script type="text/javascript">
$(document).ready(function () {
$("#chk_selall").on("click", function () {
$("#chk_byk").prop("checked", true);
$("#chk_car").prop("checked", true);
$("#chk_bus").prop("checked", true);
$("#chk_scooty").prop("checked", true);
})
$("#chk_selall").on("click", function () {
if (!$(this).prop("checked"))
{
$("#chk_byk").prop("checked", false);
$("#chk_car").prop("checked", false);
$("#chk_bus").prop("checked", false);
$("#chk_scooty").prop("checked", false);
}
});
});
</script>
checkall - это идентификатор блока allcheck, а cb-child - имя каждого флажка, который будет отмечен и снят, в зависимости от события щелчка checkall.
$("#checkall").click(function () {
if(this.checked){
$("input[name='cb-child']").each(function (i, el) {
el.setAttribute("checked", "checked");
el.checked = true;
el.parentElement.className = "checked";
});
}else{
$("input[name='cb-child']").each(function (i, el) {
el.removeAttribute("checked");
el.parentElement.className = "";
});
}
});
jQuery( function($){
// add multiple select / deselect functionality
$("#contact_select_all").click(function () {
if($("#contact_select_all").is(":checked")){
$('.noborder').prop('checked',true);
}else
$('.noborder').prop('checked',false);
});
// if all checkbox are selected, check the selectall checkbox
$(".noborder").click(function(){
if($(".noborder").length == $(".noborder:checked").length) {
$("#contact_select_all").attr("checked", "checked");
} else {
$("#contact_select_all").removeAttr("checked");
}
});
});