Выбрать все флажки (checkbox) одной кнопкой
Предположим, у Вас на сайте есть некая форма, которая содержит множество флажков (checkbox). Согласитесь, что выделять или снимать выделение с каждого флажка поочередно неудобно. Поэтому мы предлагаем Вам простой скрипт, написанный на JavaScript, который позволяет выделить или снять выделение со всех флажков формы одной кнопкой.
Ниже для примера создана форма, все флажки которой можно выбрать всего одной кнопкой "Выделить все". Чтобы очистить все флажки, воспользуйтесь кнопкой "Снять выделение".
Если Вам на сайт необходимо добавить точно такие же кнопки для добавления или снятия выделения сразу для всех флажков формы, то воспользуйтесь нашим JavaScript кодом, который необходимо будет поместить в тело Вашей странички:
<script type="text/javascript">
function check(field, flag) {
if (flag==1) { for (i=0; i<field.length; i++) field[i].checked = true; }
else { for (i=0; i<field.length; i++) field[i].checked = false; }
}
</script>Для того чтобы кнопки работали как положено, саму форму с флажками (checkbox-ами) следует оформлять следующим образом:
<form name="select_all" method="post" style="margin-left: 35px;">
<b>Какими языками Вы владеете?</b><br>
<input type="checkbox" name="list" value="1">Русский<br>
<input type="checkbox" name="list" value="2">Украинский<br>
<input type="checkbox" name="list" value="3">Белорусский<br>
<input type="checkbox" name="list" value="4">Английский<br>
<input type="checkbox" name="list" value="5">Немецкий<br>
<input type="checkbox" name="list" value="6">Другой<br><br>
<input type="button" value="Выделить все" onclick="check(this.form.list, 1)">
<input type="button" value="Снять выделение" onclick="check(this.form.list, 0)">
</form>Как видите, скрипт совсем простой, но зато он может быть очень полезен тем, у кого на сайте используется большое количество форм и флажков (checkbox), которые постоянно нужно выбирать.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
И JavaScript код:
function invert(field) {
for (i=0; i<field.length; i++) {
if (field[i].checked==true) field[i].checked=false;
else field[i].checked=true;
}
}
Чтобы при наведении на строку, в которой по умолчанию будет запись "Выберите ..." выпадал список вниз - список с чекбоксами. И если это реализуемо чтобы в строке при выборе несколько значений, менюшка сворачивалась, а в строке остались выбранные значения. Заранее спасибо Вам большое, если найдете минутку!
<input type="button" value="Выделить все" onclick="check(document.getElementsByClassName('list'), 1)">
<input type="button" value="Снять выделение" onclick="check(document.getElementsByClassName('list'), 0)">
function check() {
$("input:checkbox").prop("checked", true);
}
function uncheck() {
$("input:checkbox").prop("checked", false);
}
<input type="checkbox" name="list" value="1">Русский<br>
<input type="checkbox" name="list" value="2">Украинский<br>
<input type="checkbox" name="list" value="3">Белорусский<br>
<input type="checkbox" name="list" value="4">Английский<br>
<input type="checkbox" name="list" value="5">Немецкий<br>
Ведь в $_POST['list'] я поймаю только последнее выбранное значение. name то у всех одинаковый. Выбирать несколько смысла никакого нет.
let countClick = 0;
btn.addEventListener("click", (e) => {
countClick += 1;
if (countClick % 2 != 0) {
check(list, 1);
} else {
check(list,0);
}
});