JS/jQuery

Работа с checkbox с помощью JQuery

Сборник приемов JQuery для работы с чекбоксом.

1

Проверить состояние checkbox

<input type="checkbox" id="checkbox"> checkbox

<script>
if ($('#checkbox').is(':checked')){
    alert('Включен');
} else {
    alert('Выключен');
}
</script>
2

Отметить и снять checkbox

// Отметить checkbox
$('#checkbox').prop('checked', true);

// Снять checkbox
$('#checkbox').prop('checked', false);

Отметить/снять все на странице:

// Отметить все
$('body input:checkbox').prop('checked', true);

// Снять все
$('body input:checkbox').prop('checked', false);

Управление группой чекбоксов

<p id="controls">
    <input type="checkbox">checkbox 1
    <input type="checkbox">checkbox 2
    <input type="checkbox">checkbox 3
</p>

<input type="checkbox" id="checkbox"> Отметить/снять все

<script src="//yandex.st/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#checkbox').click(function(){
    if ($(this).is(':checked')){
        $('#controls input:checkbox').prop('checked', true);
    } else {
        $('#controls input:checkbox').prop('checked', false);
    }
});
</script>
3

Программный клик по checkbox

Имитация клика по чекбоксу с запуском повешенных на него событий.

$('#checkbox').trigger('click');
4

Узнать количество отмеченных

var count = $(':checkbox:checked').length;
5

Обход CheckBox'ов

Выбор всех отмеченных

$('input:checkbox:checked').each(function(){
    alert($(this).val());
});

Получить из всех отмеченных массив значений атрибута value

var checked = [];
$('input:checkbox:checked').each(function() {
    checked.push($(this).val());
});

Обход неотмеченных чекбоксов

$('input:checkbox:not(:checked)').each(function(){
    alert($(this).val());
});
6

Показать или скрыть блок контента по клику на checkbox

<input type="checkbox" id="checkbox"> Показать блок с текстом

<div id="text" style="display: none;">Какой-то текст....</div>

<script>
$('#checkbox').click(function(){
    if ($(this).is(':checked')){
        $('#text').show(100);
    } else {
        $('#text').hide(100);
    }
});    
</script>
7

Разблокировать кнопку при клике на checkbox

<input type="checkbox" id="checkbox"> Правила мною прочитаны и приняты
<button id="btn" disabled="disabled">Продолжить регистрацию</button>

<script>
$('#checkbox').click(function(){
    if ($(this).is(':checked')){
        $('#btn').removeAttr('disabled');
    } else {
        $('#btn').attr('disabled', 'disabled'); 
    }
});
</script>
8

Сменить цвет текста при выборе чекбокса

<label><input type="checkbox"> checkbox 1</label>
<label><input type="checkbox"> checkbox 2</label>
<label><input type="checkbox"> checkbox 3</label>

<script>
// Добавление класса:
$('input:checkbox').click(function(){
    if ($(this).is(':checked')) {
        $(this).parent().addClass('green');
    } else {
        $(this).parent().removeClass('green');
    }
});

// Или атрибут style:
$('input:checkbox').click(function(){
    if ($(this).is(':checked')) {
        $(this).parent().css('color', 'green');
    } else {
        $(this).parent().css('color', '#000000');
    }
});
</script>
9

Отправить форму через ajax при нажатии на чекбокс

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

Результат выводится в теге с id="result".

<form id="form">
    <input type="checkbox" id="checkbox"> Отправить форму через AJAX
    ...
</form>

<p id="result"></p>

<script src="//yandex.st/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#checkbox').click(function(){
    if ($(this).is(':checked')){
        $.ajax({
            url: '/ajax.php', 
            method: 'post',
            dataType: 'html',
            data: $('#form').serialize(),
            success: function(data){
                $('#result').html(data);
            }
        });
    }
});
</script>
10

Только один отмеченный чекбокс

Radio button из chexbox, при выборе одного чекбокса все остальные снимаются.

<div id="group">
    <input type="checkbox">checkbox 1
    <input type="checkbox">checkbox 2
    <input type="checkbox">checkbox 2
</div>

<script>
$('#group input:checkbox').click(function(){
    if ($(this).is(':checked')) {
         $('#group input:checkbox').not(this).prop('checked', false);
    }
});
</script>
14 декабря 2016