Проверить все / снять все флажки js
У меня есть небольшая проблема, и я не знаю, как ее исправить. Если у меня установлены все флажки, появится "отменить выбор всех", но если я отменил выбор одного или двух, я хочу, чтобы мои "выбрать все" снова появились, моя проблема что если я выберу каждый флажок и начну вручную снимать флажок один за другим, это будет означать, что снова активировать select all, но если я нажму select all, он будет снимать все галочки вместо check all.
Это часть моего HTML-кода:
<input type="button" class="btn-primary btn-mini" id="check1" value="Check All" />
<input type="hidden" id="isChkd" value="true" />
<input type="checkbox" name="" value="" class="cb1-element"> 751
<input type="checkbox" name="" value="" class="cb1-element"> 752
<input type="checkbox" name="" value="" class="cb1-element"> 753
<input type="checkbox" name="" value="" class="cb1-element"> 754
Мой JS:
$('#check1').toggle(function(){
$('.cb1-element').attr('checked','checked');
$(this).val('Uncheck All');
$('#isChkd').val(true);
},function(){
$('.cb1-element').removeAttr('checked');
$(this).val('Check All');
$('#isChkd').val(false);
})
$('.cb1-element').change(function(){
if($('#isChkd').val() == false){
$('#check1').val('Uncheck All');
$('#isChkd').val(true);
}else{
$('#check1').val('Check All');
$('#isChkd').val(false);
}
});
7 ответов
$('#check1').click(function(){
if($('#isChkd').val() == 'true'){
$('.cb1-element').attr('checked','checked');
$(this).val('Uncheck All');
$('#isChkd').val('false');
}
else{
$('.cb1-element').removeAttr('checked');
$(this).val('Check All');
$('#isChkd').val('true');
}
});
$('.cb1-element').change(function(){
var all = $('input.cb1-element').length;
var checked = $('input.cb1-element:checked').length;
if(all == checked){
$('#check1').val('Uncheck All');
$('#isChkd').val('false');
}else{
$('#check1').val('Check All');
$('#isChkd').val('true');
}
});
работает jsFiddle здесь http://jsfiddle.net/C9Tw2/18/
Попробуй это,
<input type="checkbox" id="check1" onclick="$('input[type=checkbox][class=cb1-element]').attr('checked',this.checked)">
Несколько вещей для рассмотрения:
1) Чтобы установить / очистить checked собственность, использование .prop('checked', true) или же .prop('checked', false), Это более новый и лучший способ обработки свойств в jQuery.
2) Вместо использования скрытого ввода для отслеживания необходимости установки или снятия флажков, вы можете вместо этого иметь 2 кнопки, которые переключают видимость (или отображают на самом деле). Таким образом, вам не нужно особый случай кнопки на основе состояния флажка.
3) Toggle не является обработчиком изменения состояния. Это просто переключает видимость элемента. Вместо этого, в сочетании с комментарием № 2, используйте .on('click', function() {}), или просто .click(),
4) У вас действительно есть 3 состояния: все включено, все выключено, какая-то другая комбинация. Вам нужно решить, что делать с третьим государством. В этом случае вы можете даже показать "Check All" и "Uncheck All".
HTML:
<input type="button" class="btn-primary btn-mini" id="check1" value="Check All"/>
<input type="button" class="btn-primary btn-mini" id="uncheck1" value="Uncheck All"/>
<input type="checkbox" name="" value="" class="cb1-element">751
...
JS:
$('#check1').on('click', function () {
$('.cb1-element').prop('checked', true);
$('#check1, #uncheck1').toggle();
});
$('#uncheck1').on('click', function () {
$('.cb1-element').prop('checked', false);
$('#check1, #uncheck1').toggle();
});
$('.cb1-element').change(function () {
var num = $('.cb1-element').length;
if ($('.cb1-element:checked').length == num) {
$('#check1').hide();
$('#uncheck1').show();
} else {
$('#uncheck1').hide();
$('#check1').show();
}
});
Я думаю $('#isChkd').val() возвращает строку, поэтому сравнение с == false всегда терпит неудачу.
HTML
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<button>Check All</button>
JS
$(':checkbox').click(function () {
ex()
});
$('button').click(function () {
ex(1)
});
var ex = function (btn) {
if ($(':checkbox').length == $(':checkbox:checked').length) { //All are checked
if (btn == 1) { //If button is clicked
$(':checkbox').attr('checked', false);//Uncheck All
$('button').html('Check All');
} else { //If button is not clicked i.e. the last unselected checkbox was clicked
$('button').html('Uncheck All');
}
} else if (btn == 1) { // BUtton is clicked
$(':checkbox').attr('checked', true);//Check All
$('button').html('Uncheck All');
} else {
$('button').html('Check All'); // Reset text to default
}
}
Поскольку вы используете скрытый тег ввода в качестве флага, я бы использовал это в вашей функции щелчка, а также
$('#check1').click(function(){
if($('#isChkd').val() == "false"){
$('.cb1-element').prop('checked', true);
$(this).val('Uncheck All');
$('#isChkd').val(true);
} else if($('#isChkd').val() == "true"){
$('.cb1-element').prop('checked', false);
$(this).val('Check All');
$('#isChkd').val(false);
}
});
Таким образом, у вас нет функции переключения, которую нужно нажать, чтобы она работала.
Я также добавил еще один оператор if в вашу функцию изменения, чтобы определить, когда установлены все 4 флажка, он изменит его на "Uncheck All" и ваш флаг на "true".
$('.cb1-element').change(function(){
if($('#isChkd').val() == false){
$('#check1').val('Uncheck All');
$('#isChkd').val(true);
}else if($(':checked').length == 4){
$('#check1').val('Uncheck All');
$('#isChkd').val(true);
}else{
$('#check1').val('Check All');
$('#isChkd').val(false);
}
});
Вы можете увидеть, как это работает здесь, в jsfiddle: http://jsfiddle.net/TWMAu/
Проверить все флажки
$("input:checkbox").attr("checked", true);
снять все флажки
$("input:checkbox").attr("checked", false);
проверить все флажки, используя класс
$(".class_name:checkbox").attr("checked", true);
снять все флажки, используя класс
$(".class_name:checkbox").attr("checked", false);