Требуется отметить все 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); // если чекбокс не отмечен, снимаем отметку со всех чекбоксов
}
});
});