jQuery Checkbox Checked. Работа с чекбоксами в JS
Часто при работе с формами в HTML приходится взаимодействовать с чекбоксами, которые активируют те или иные сценарии обработки этих форм. Наиболее распространенный пример - чекбокс "Я согласен с правилами ...", который нужно отметить, чтобы кнопка отправки формы стала активной.
Другой пример - условный вывод некоторых элементов формы если выбраны какие-либо определенные опции.
Подобные задачи с легкостью решаются при помощи jQuery и нескольких строчек кода.
Как проверить чекбокс при помощи jQuery (jquery checkbox checked)
Проверить выбран ли чекбокс можно несколькими способами.
Первый и самый очевидный - проверка атрибута checked
у чекбокса. Это можно сделать либо на чистом js, обратившись свойству checked
if(this.checked){ ... }
либо при помощи jQuery метода prop()
, который возвращает значение атрибута, переданного в качестве аргумента. У атрибута checked
может быть только два значения: true
или false
. Поэтому если $('input').prop('checked')
возвращает true - считаем, что чекбокс выбран.
<script>
jQuery(document).ready(function($){
$('input[type="checkbox"]').on('change', function(){
// Это короткая запись, которая означает то же, что и if($(this).prop('checked') == true)
if($(this).prop('checked'))
alert('Чекбокс выбран');
});
});
</script>
<input type="checkbox" name="checkbox" />
Другой способ - проверка так называемого псевдокласса :checked
, который добавляется отмеченным чекбоксам. Проверить наличие псевдокласса можно при помощи jQuery метода is()
<script>
jQuery(document).ready(function($){
$('input[name="trigger"]').on('change', function($){
if($(this).is(':checked'))
$('input[name="target"]').show();
else
$('input[name="target"]').hide();
});
});
</script>
<form>
<input type="checkbox" name="trigger" />
<input type="text" name="target" style="display:none" />
</form>
Псевдоклассы в CSS и jQuery - очень интересная и полезная вещь, которая заслуживает отдельной статьи. Обязательно расскажу о них поподробнее в ближайшем будущем.
Как выбрать чекбокс (checkbox check)
Предположим вам нужно отметить все чекбоксы если отмечен чекбокс "Выбрать все"
prop()
с параметром checked
. $('input').prop('checked', true); // Чекбокс выбран
$('input').prop('checked', false); // Чекбокс не выбран
checked
для чекбокса, в зависимости от того, отмечен ли чекбокс "Выбрать все".
<script>
jQuery(document).ready(function($){
$('input[name="select-all"]').on('change', function(){
if($(this).is(':checked')){
$('.checkboxes').find('input[type="checkbox"]')
.prop('checked', true); // Устанавливаем значение свойства checked
} else {
$('.checkboxes').find('input[type="checkbox"]')
.prop('checked', false);
});
});
</script>
<input type="checkbox" name="select-all" />
<div class="checkboxes">
<input type="checkbox" name="checkboxes[]" value="1"/>
<input type="checkbox" name="checkboxes[]" value="2"/>
<input type="checkbox" name="checkboxes[]" value="n"/>
</div>
:input
), можно воспользоваться jQuery функцией val()
. var chekbox_value = $('input[name="checkbox"]').val();
:checked
Оставьте свой комментарий