|
|
|||
|
|
Как отметить все галочки в формеЧтобы отметить все галочки (checkbox`ы) в определенной форме на странице, можно воспользоваться JavaScript, написав свою функцию. Отметить или снять отметку со всех чекбоксовПример ниже позволяет по клику на одну галочку отметить или снять отметки со всех checkbox`ов формы, вне зависимости от того, были ли ранее отмечены/сняты галочками какие-либо чекбоксы. HTML-форма с checkbox
<form action="" method="POST"> <div style="padding-bottom: 10px;"><input type="checkbox" name="set" onclick="checkboxes_sel_all(this)"> Выделить/снять все</div> <div><input type="checkbox" name="item_id[]" value="1"> Checkbox 1</div> <div><input type="checkbox" name="item_id[]" value="2"> Checkbox 2</div> <div><input type="checkbox" name="item_id[]" value="3"> Checkbox 3</div> <div><input type="checkbox" name="item_id[]" value="4"> Checkbox 4</div> <div><input type="checkbox" name="item_id[]" value="5"> Checkbox 5</div> <div><input type="submit" name="submit" value="Отправить"></div> </form> JavaScript-функция для управления checkbox`ами
function checkboxes_sel_all(obj) { // Получаем NodeList дочерних элементов input формы: var items = obj.form.getElementsByTagName("input"), len, i; for (i = 0, len = items.length; i < len; i += 1) { // Если текущий элемент является чекбоксом if (items.item(i).type && items.item(i).type === "checkbox") { if (obj.checked) { // Устанавливаем отметки всем чекбоксам items.item(i).checked = true; } else { // Иначе снимаем отметки со всех чекбоксов: items.item(i).checked = false; } } } } Инверсионная пометка checkboxЭтот пример позволяет отмечать галочками только те поля, которые не были отмечены вручную, галочки выставленные вручную будут сняты. Попробуйте отметить Checkbox 1 и Checkbox 3 и понажимать "Инверсионно выделить/снять все галочки с чекбокс ов". HTML-форма с checkbox - инверсия
<div style="padding-bottom: 10px;"><input type="checkbox" name="set" onclick="checkboxes_sel_inversion(this)"> Инверсионно выделить/снять все галочки с чекбоксов</div> <div><input type="checkbox" name="item_id[]" value="1"> Checkbox 1</div> <div><input type="checkbox" name="item_id[]" value="2"> Checkbox 2</div> <div><input type="checkbox" name="item_id[]" value="3"> Checkbox 3</div> <div><input type="checkbox" name="item_id[]" value="4"> Checkbox 4</div> <div><input type="checkbox" name="item_id[]" value="5"> Checkbox 5</div> <div><input type="submit" name="submit" value="Отправить"></div> JavaScript-функция для управления checkbox`ами - инверсия
function checkboxes_sel_inversion(obj) { // Получаем NodeList дочерних элементов input формы: var items = obj.form.getElementsByTagName("input"), len, i; for (i = 0, len = items.length; i < len; i += 1) { // Если текущий элемент является чекбоксом... if (items.item(i).type && items.item(i).type === "checkbox") { // Вариант инверсии выбора if (items.item(i).checked === false) { items.item(i).checked = true; } else { items.item(i).checked = false; } } } } Чтобы добавить функцию на JavaScript в тело HTML-страницы используйте теги: <script type="text/javascript"> ... Код на JavaScript </script> Опубликовано: 2014/07/18
HTML-код ссылки на эту страницу:
<a href="https://petrenco.com/javascript.php?txt=181" target="_blank">Как отметить все галочки в форме</a> 13436
Добавить комментарий
|
||