Массовый выбор CheckBox

@xunicorn · Регистрация: 22.11.2011

Author24 — интернет-сервис помощи студентам

Здравствуйте. Есть такая проблема. Задача - сделать массовый выбор чекбоксов при нажатии на одном.
Такой обработчик события:

Javascript

  if(!$(chbx).is(":checked"))
  {
    $(".checkbox").attr("checked", false);
  }
  else
  {
    $(".checkbox").attr("checked", true);
  }

При первом нажатии оно выделает все, при втором - убирает выбор чекбоксов. Но при третьем и тд визуально галка не ставится на чекбоксе, хотя в атрибутах и показывает "checked".

В чем ошибка обработчика ?

@Vlad_IT · 31.07.2013, 18:12

Можно попробовать так

Javascript

if(!$(chbx).is(":checked"))
  {
    $(".checkbox").each(function() { this.checked = false; });
  }
  else
  {
    $(".checkbox").each(function() { this.checked = true; });
  }

Добавлено через 4 минуты
Кстати, похоже у Вас ошибка в логике кода.
если чекед

Javascript

if(!$(chbx).is(":checked")) // Если чекед отключен
  {
    $(".checkbox").attr("checked", false); // Тогда отключить его
  }
  else // Иначе
  {
    $(".checkbox").attr("checked", true); // Включить
  }

Попробуйте так

Javascript

if($(chbx).is(":checked"))
  {
    $(".checkbox").attr("checked", false);
  }
  else // Иначе
  {
    $(".checkbox").attr("checked", true);
  }

@xunicorn · 31.07.2013, 19:23 **[ТС]**

Vlad_IT

кстати это полный бред

мой вариант

Javascript

if(!$(chbx).is(":checked")) // Если чекед отключен
  {
    $(".checkbox").attr("checked", false); // Тогда отключить его //(все элементы с классом .checkbox)
  }
  else // Иначе //(если чекбокс включен)
  {
    $(".checkbox").attr("checked", true); // Включить //(включить все елементы с классом checkbox)
  }

но сути проблемы это не меняет - все равно не работает

@Vlad_IT · 31.07.2013, 20:13

Тогда вот

HTML5

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://yandex.st/jquery/2.0.3/jquery.min.js"></script>
    <title></title>
</head>
<body>
    <input type="checkbox" id="main_check" />
 
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
 
    <script type="text/javascript">
 
        jQuery('#main_check').click(function()
        {
            if(jQuery(this).is(':checked'))
                jQuery('.checkbox'). prop('checked', true);
            else jQuery('.checkbox').prop('checked', false);
        });
    </script>
</body>
</html>

@xunicorn · 31.07.2013, 20:53 **[ТС]**

спасибо за ответ, воспользовался вашим алгоритмом и все работает. Не пойму, почему мой алгоритм не хочет работать

HTML5

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://yandex.st/jquery/2.0.3/jquery.min.js"></script>
    <title></title>
    <script>
      
    </script>
</head>
<body>
    <input type="checkbox" id="main_check" onclick="checkAllChbx(this)"/>Main
 <div style="border: 1px solid black">
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
 </div>
    <script type="text/javascript">
 
      function checkAllChbx(chbx)
      {  
        if($(chbx).is(":checked"))
        {
          $(".checkbox").each(function(){$(this).attr("checked", true);});
        }
        else
        {
          $(".checkbox").each(function(){$(this).attr("checked", false);});
        }
      }
 /*
        $('#main_check').click(function()
        {
            if(jQuery(this).is(':checked'))
                jQuery('.checkbox'). prop('checked', true);
            else jQuery('.checkbox').prop('checked', false);
        });
*/   
    </script>
</body>
</html>

@axle_vega · 21.04.2015, 14:32

День добрый! Пришлось поднять старую тему, дабы не плодить новых.

В общем-то код, который предложил Vlad_IT, корректно работает, в отличие от того, что нашел в сети. Но возникла необходимость его доделать.
Нужно сделать так, чтобы при отключении хотя бы одного чекбокса, главный тоже отключался.

Дело в том, что у меня есть двухуровневый каталог товаров, и, соответственно, поиск по нему. Если не отключить общий чекбокс - то нет никакого толку от того, что дочерние чекбоксы неактивны. Поиск всё равно будет производиться по всему каталогу, а не по выделенным разделам.

Надеюсь, правильно объяснил.

Подскажите, что нужно дописать?

@Lazy_Den · 21.04.2015, 14:56

Не по теме:

axle_vega, лучше было бы создать новую тему, т.к. ваш вопрос может и имеет схожесть с этим, но всё-таки отличается по смыслу. Ну и хорошо бы показывать структуру HTML

Вот пример реализации.

HTML5

<ul>
    <li><input type="checkbox" class="main_check" />
        <ul>
            <li><input type="checkbox" class="checkbox" /></li>
            <li><input type="checkbox" class="checkbox" /></li>
            <li><input type="checkbox" class="checkbox" /></li>
        </ul>
    </li>
    <li><input type="checkbox" class="main_check" />
        <ul>
            <li><input type="checkbox" class="checkbox" /></li>
            <li><input type="checkbox" class="checkbox" /></li>
            <li><input type="checkbox" class="checkbox" /></li>
        </ul>
    </li>
</ul>

Javascript

$('.main_check').on('change',function () {
    var $that = $(this);
    $that.next('ul').find(':checkbox').prop('checked', $that.prop('checked'));
});
$('.checkbox').on('change', function(){
    var $that = $(this),
        ul = $that.closest('ul'),
        main = ul.prev('.main_check');
    main.prop('checked', $(':checkbox',ul).length == $(':checkbox:checked',ul).length);
});

Сообщение от axle_vega

код, который предложил Vlad_IT, корректно работает

И при всём этом, такой ответ заслуживает минус (жирный). Почему? Потому, что допущена грубая ошибка. "В пределах одной страницы, не может быть два и более элемента с одинаковым id". И это даже не обсуждается. Во-вторых, событие, для таких случаев, желательно устанавливать "change", а не "click".

@axle_vega · 21.04.2015, 15:01

Сообщение от Lazy_Den

Вот пример реализации.

Спасибо! Работает точно так, как мне нужно! Жирный плюс за оперативный ответ

В следующий раз постараюсь точно и правильно оформить вопрос )

@axle_vega 0 / 0 / 1 Регистрация: 15.01.2014 Сообщений: 32
	21.04.2015, 14:32	6
	День добрый! Пришлось поднять старую тему, дабы не плодить новых. В общем-то код, который предложил Vlad_IT, корректно работает, в отличие от того, что нашел в сети. Но возникла необходимость его доделать. Нужно сделать так, чтобы при отключении хотя бы одного чекбокса, главный тоже отключался. Дело в том, что у меня есть двухуровневый каталог товаров, и, соответственно, поиск по нему. Если не отключить общий чекбокс - то нет никакого толку от того, что дочерние чекбоксы неактивны. Поиск всё равно будет производиться по всему каталогу, а не по выделенным разделам. Надеюсь, правильно объяснил. Подскажите, что нужно дописать? 0

@axle_vega 0 / 0 / 1 Регистрация: 15.01.2014 Сообщений: 32
	21.04.2015, 15:01	8
	Сообщение от Lazy_Den Вот пример реализации. Спасибо! Работает точно так, как мне нужно! Жирный плюс за оперативный ответ В следующий раз постараюсь точно и правильно оформить вопрос ) 0