Установка флажков с помощью JQuery

Question

У меня есть динамическая форма, в которой есть несколько флажков. Я хочу создать метод «выбрать все», который при каждом нажатии автоматически проверяет все поля в форме.

[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] 

Мой JQuery выглядит следующим образом:

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

});

Моя консоль выход:

> 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">​ 

Я могу Перебери каждый элемент, однако, я не знаю, как на самом деле установить флажок, чтобы проверить.

Часть, с которой я борюсь, - это фактическая настройка проверенного состояния, я знаю, что мне нужно использовать: .prop ('checked', true), однако, что я использую для фактического элемента? $ (Это), очевидно, не работает ...

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

Answer 1

Используйте этот простой код

$(".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" />

Answer 2

demo link

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">

Answer 3

Вы имеете в виду #select-all, как (this.checked), Вам необходимо обратиться в $(this).

Во-вторых, вы можете использовать :checked, чтобы узнать, проверено или нет.

В-третьих, вам не нужно зацикливаться на $('.checkbox1'). jquery будет соответствовать всем элементам и будет обновлять атрибут.

Ниже фрагмент кода, который может быть полезным

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

JSFIDDLE

Answer 4

Просто, чтобы ответить на этот вопрос. Я попробовал различные предлагаемые решения, и они, похоже, не работали. Однако я понял, что из-за использования JQuery Uniform мне нужно добавить дополнительный бит кода, чтобы заставить дисплей работать правильно:

This post было полезно.

Спасибо всем, кто нашел время ответить.

Мой окончательный код:.

$(document).ready(function(){ 
    $('#select-all').click(function() { 
     if (this.checked) 
     { 
      $('.checkbox1').prop('checked', true); 

     } else { 
      $('.checkbox1').prop('checked', false); 
     } 
     $.uniform.update('.checkbox1'); 
    }); 
});