2

Требуется отметить все checkboxes по нажатию на главный checkbox. Почему скрипт не работает?

<table>
    <tr>
        <th>To export</th>
    </tr>
    @using (Html.BeginForm("ExportResults", "Exporter"))
    {
     foreach(int val in collection)
     {
         <tr>
            <td>
               <input type="checkbox" value="val" id="squaredThree_exp_@val" class="squaredThree" name="toexport"/>
            </td>
        </tr>
     } 
     <tr>
         <td>
             <input type="checkbox" value="23" id="mainSquared_exp" class="mainSquared" name="toexportmain"/>
         </td>
     </tr> 
    }
<table>

Код скрипта, который вынесен в отдельный файл и подключён в самом начале html-страницы:

    $(document).ready(function () {
    $('input.mainSquared').click(function () { // при клике по главному чекбоксу
        if ($('input.mainSquared').attr('checked')) { // проверяем его значение
            $('.squaredThree').setAttribute('checked', true); // если чекбокс отмечен, отмечаем все чекбоксы
        } else {
            $('.squaredThree').setAttribute('checked', false); // если чекбокс не отмечен, снимаем отметку со всех чекбоксов
        }
    });
});

P.S.: А если мы хотим искать по началу id или по началу имени элемента, можно делать это так:

$(document).ready(function () {
    $('[name ^= "toExportMain"]').click(function () { // при клике по главному чекбоксу
        if ($('[name ^= "toExportMain"]').prop('checked')) { // проверяем его значение
            $('[id ^= "squaredThree_exp"]').prop('checked', true); // если чекбокс отмечен, отмечаем все чекбоксы
        } else {
            $('[id ^= "squaredThree_exp"]').prop('checked', false); // если чекбокс не отмечен, снимаем отметку со всех чекбоксов
        }
    });
});

3 ответа 3

2

Используйте $().prop() для изменения состояния чекбокса.

$('input.mainSquared').click(function () { // при клике по главному чекбоксу
    if ($('input.mainSquared').prop('checked')) { // проверяем его значение
        $('.squaredThree').prop('checked', true); // если чекбокс отмечен, отмечаем все чекбоксы
    } else {
        $('.squaredThree').prop('checked', false); // если чекбокс не отмечен, снимаем отметку со всех чекбоксов
    }
});
6
  • 2
    Можно покороче записать: $('input.mainSquared').click(function () { $('.squaredThree').prop('checked', $(this).prop('checked')); });
    – Deonis
    1 окт 2015 в 17:54
  • @Deonis, ага, спасибо за замечание :) А так я просто тупо взял поправил код.
    – ARZi
    1 окт 2015 в 17:59
  • @ ARZi, а если я хочу по id элемента искать, как тогда изменится код?
    – neo
    2 окт 2015 в 7:25
  • @Deonis, Спасибо за ответ. А почему-то на соседней форме выделение не работает. У меня на странице должно быть две колонки с checkbox'ами и под каждой из них checkbox для выделения всех. Тот, что левее, работает. А тот, что правее - нет. В чём причина?
    – neo
    2 окт 2015 в 7:38
  • 1
    Вместо prop можно еще короче написать if ( $('somecheckbox').is(':checked') ) 2 окт 2015 в 9:03
2

Потому что не атрибуты надо менять, а свойства:

$('.squaredThree').prop('checked', true);

И вообще, в jQuery метод называется attr, а не setAttribute.

http://api.jquery.com/attr/

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

0
    if ( $('input.mainSquared').attr('checked') ) { // проверяем его значение
        $('.squaredThree').attr('checked', true); 
    } else {
        $('.squaredThree').removeAttr('checked');
    }

Попробуйте удалять атрибут совсем, если снято выделение с чекбокса

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.