Задать вопрос
light204
@light204
javascript

Как правильно написать скрипт выделения чекбоксов?

Я написал вот такой скрипт с использованием JQuery:
<html>
<head>
<meta  http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выделение  всех чекбоксов</title>
<script  type="text/javascript" src="http://lemoland.ru/sms/jquery-2.0.3.min.js"></script>

<script  type="text/javascript">

$(document).ready(function() {
    $("#check_all").click(function () {
         if (!$("#check_all").is(":checked"))
            $(".checkbox").removeAttr("checked");
        else
            $(".checkbox").attr("checked","checked");
    });
});

</script>

</head> 

<body>
	
		<form method="POST">
		    <label><input type="checkbox" id="check_all"> Выделить всё</label>  <br>
		    <label><input type="checkbox" name="checks" class="checkbox" value="1"> Чекбокс 1</label>  <br>
		    <label><input type="checkbox" name="checks" class="checkbox" value="2"> Чекбокс 2</label>  <br>
		    <label><input type="checkbox" name="checks" class="checkbox" value="3"> Чекбокс 3</label>  <br>       
		</form>
	
</body>
</html>


Проблема в том, что он выделяет все чекбоксы только при первой загрузке страницы (т.е.: Загрузилась страница - нажал на "Выделить все" - все выделилось - потом снова нажал "Выделить все" - все убралось - а вот потом по нажатию на выделить все больше ничего не выделяется)

Вот тут я расположил код, посмотрите: lemoland.ru/sms/chek.html

Как бы его доработать, чтобы все выделялось/убиралось постоянно?
  • Вопрос задан
  • 5655 просмотров
1 комментарий
Подписаться 4 Оценить 1 комментарий
Решения вопроса 1
light204
@light204 Автор вопроса
Воспользовался функцией:

$(document).ready(function() {
    $("#check_all").click(function () {
         if (!$("#check_all").is(":checked"))
            $(".checkbox").prop("checked",false);
        else
            $(".checkbox").prop("checked",true);
    });
});


В этом коде интересная ситуация. Флажки выбираются, но вот если подключить такой обработчик:
<?php
  $aDoor = $_POST['checks'];
  if(empty($aDoor))
  {
    echo("Вы ничего не выбрали.");
  }
  else
  {
    $N = count($aDoor);
    
    for($i=0; $i < $N; $i++)
    {
      echo($aDoor[$i] . " ");
    }
  }
?>


то он выдает только последний выбранный value флажка (если 1 и 2 - то 2; если 1 и 2 и 3 - то 3 и т.д.)

Увидеть это можно тут:
lemoland.ru/sms/chek.html
Вот почему так происходит?
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 3
Paul_Smith
@Paul_Smith
Установка флажка:
$(".checkbox").prop('checked', true);

Снятие флажка:
$(".checkbox").prop('checked', false)

Код для вашего случая: 
$("#checkbox").change(function(){
    $('.checkbox').prop('checked', $(this).is(':checked'));  
})


jsfiddle.net/N4F78
Ответ написан
Комментировать
Комментировать
Yavanosta
@Yavanosta 
$(document).ready(function() {
    $("#check_all").click(function () {
         if (!$("#check_all").is(":checked"))
            $(".checkbox").prop("checked",false);
        else
            $(".checkbox").prop("checked",true);
    });
});
Ответ написан
2 комментария
2 комментария
aen
@aen
Keep calm and 'use strict';
Буду краток: jsfiddle.net/P7wet
;(function($) {
    var $checks = $(".checkbox");
    
    $('#check_all').on('change', function(e) {
        var $this = $(this);
        $checks.prop('checked', $this.prop('checked'));
    });
})(jQuery);
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Тестирование модуля ElasticSearch через ftp
22 нояб. 2024, в 03:54
1500 руб./за проект
Телеграм бот
22 нояб. 2024, в 02:56
10000 руб./за проект
Перерисовать логотип в векторе
22 нояб. 2024, в 00:55
500 руб./за проект
Ещё заказы