У меня есть следующее:
<div class="pricing-levels-2">
<p>Which level would you like? (Click all that apply)</p>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
</div>
<div class="pricing-levels-3">
<p>Which level would you like? (Click all that apply)</p>
<input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
</div>
Я хочу, чтобы .pricing-levels-2
каждый раз, когда я нажимаю один из них, поэтому я сделал:
jQuery('.pricing-levels-2 .single-checkbox').on('click', function(){
jQuery('.pricing-levels-2 .single-checkbox').attr('checked', false);
jQuery(this).attr('checked', true);
});
Но проблема в том, что теперь все флажки очищены, даже тот, который я выбираю. Поэтому я не могу выбрать какой-либо (я хочу, чтобы тот, который я нажимаю, выбирается).
Что я делаю неправильно?
Вместо этого вам нужно использовать .prop:
jQuery('.pricing-levels-2 .single-checkbox').on('click', function(){
jQuery('.pricing-levels-2 .single-checkbox').prop('checked', false);
jQuery(this).prop('checked', true);
});
by attr
jQuery('.pricing-levels-2 .single-checkbox').on('click', function(){
jQuery('.pricing-levels-2 .single-checkbox').removeAttr('checked');
jQuery(this).attr('checked', 'checked');
});
ссылка removeAttr
jQuery('.pricing-levels-2 .single-checkbox').on('click', function(){
jQuery('.pricing-levels-2 .single-checkbox').prop('checked', false);
jQuery(this).prop('checked', true);
});