В этой статье рассмотрим, как с помощью jquery проверить, нажат ли чекбокс, а так же найдем по id его label и сделаем перечеркнутым при нажатии.
Разметка чекбоксов для примера:
<label for="check">чекбокс не нажат</label>
<input type="checkbox" id="check">
<label for="check2">чекбокс не нажат</label>
<input type="checkbox" id="check2">
<input type="checkbox" id="check">
<label for="check2">чекбокс не нажат</label>
<input type="checkbox" id="check2">
Скрипт, который будет фиксировать нажатия:
<script>
$("input:checkbox").change(function() {
if($(this).prop('checked')) {
$("label[for=" + $(this).attr('id') + "]").css('text-decoration', 'line-through').text('чекбокс нажат');
}
else {
$("label[for=" + $(this).attr('id') + "]").css('text-decoration', 'none').text('чекбокс не нажат');
} });
</script>
$("input:checkbox").change(function() {
if($(this).prop('checked')) {
$("label[for=" + $(this).attr('id') + "]").css('text-decoration', 'line-through').text('чекбокс нажат');
}
else {
$("label[for=" + $(this).attr('id') + "]").css('text-decoration', 'none').text('чекбокс не нажат');
} });
</script>
Демо - пример
Перед использованием скрипта не забываем подключать к странице библиотеку jquery. Ее можно скачать отсюда, либо подключить с помощью ссылки
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Как с помощью jquery сделать скрипт, который будет закрывать блок при клике, можно прочитать здесь.
