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

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

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

Отметить и снять 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>

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

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

<div class="text-center">
    <p><label class="checkbox"><input type="checkbox" id="checkbox"> checkbox</label></p>
    <p><a id="btn" href="#">Програмно кликнуть по checkbox</a></p>
</div>
$('#checkbox').trigger('click');

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

<div class="text-center">
    <p id="controls">
        <label class="checkbox"><input type="checkbox"> checkbox 1</label><br>
        <label class="checkbox"><input type="checkbox"> checkbox 2</label><br>
        <label class="checkbox"><input type="checkbox"> checkbox 3</label>
    </p>
    <p id="result">Отмечено: <span>0</span></p>    
</div>
<script src="//yandex.st/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#controls input:checkbox').click(function(){
    $('#result span').html($('#controls input:checkbox:checked').length);
});
</script>

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

<div class="text-center">
        <label class="checkbox"><input type="checkbox" value="значение 1">checkbox 1</label><br>
        <label class="checkbox"><input type="checkbox" value="значение 2">checkbox 2</label><br>
        <label class="checkbox"><input type="checkbox" value="значение 3">checkbox 2</label>
        <button id="btn" class="btn btn-sm btn-default">Поучить отмеченные</button>
    <p id="result" class="text-success"></p>
</div>
<script src="//yandex.st/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#btn').click(function(){
     $('#result').html('');
    $('input:checkbox:checked').each(function(){
        $('#result').append($(this).val() + '<br>');
    });
});
</script>

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

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

Показать или скрыть блок контента по клику на 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>

Разблокировать кнопку при клике на 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>

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

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

Отправить форму через 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>

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

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>

http://snipp.ru/view/49