Сборник приемов JQuery для работы с чекбоксом.
<input type="checkbox" id="checkbox"> checkbox
<script>
if ($('#checkbox').is(':checked')){
alert('Включен');
} else {
alert('Выключен');
}
</script>
// Отметить 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>
$('#checkbox').click(function(){
if ($(this).is(':checked')){
$('#controls input:checkbox').prop('checked', true);
} else {
$('#controls input:checkbox').prop('checked', false);
}
});
</script>
Имитация клика по чекбоксу с запуском повешенных на него событий.
Выбор всех отмеченных
Получить из всех отмеченных массив значений атрибута value
Обход неотмеченных чекбоксов
<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>
<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>
Radio button из chexbox, при выборе одного чекбокса все остальные снимаются.
<div id="group">
<input type="checkbox">checkbox 1
<input type="checkbox">checkbox 2
<input type="checkbox">checkbox 3
</div>
<script>
$('#group input:checkbox').click(function(){
if ($(this).is(':checked')) {
$('#group input:checkbox').not(this).prop('checked', false);
}
});
</script>
<form action="" method="post" id="form">
<label><input type="checkbox">checkbox 1</label>
<label><input type="checkbox">checkbox 2</label>
<label><input type="checkbox">checkbox 3</label>
</form>
<script>
$('#form input[type="checkbox"]').on('change', function(){
$('#form').submit();
});
});
</script>
DEMO: http://profi.spage.me/jquery/checkbox-set-true-false-checkbox-click-event-on-jquery-and-js/
Я сделал так
$('#checkbox').click(function(){
if ($(this).is(':checked')){
$('#text').show(100);
$('#text2').hide(100);
} else {
$('#text').hide(100);
$('#text2').show(100);
}
}); Но при первой загрузке страницы скрыто оба блока , и только после первого нажатия на checkbox все начинает работать как надо. Что надо добавить, что бы при первой загрузки блок с ID ="text2" был виден?