Как лучше выбрать только выбранные checkbox?
Есть модальное окно и на нем checkbox'ы:
<div class="row"> <div class="col-md-6"> <ul class="list-group"> <li class="list-group-item"> <input type="checkbox" id="item1" value="А"> <label for="item1">А</label> </li> <li class="list-group-item"> <input type="checkbox" id="item2" value="Б"> <label for="item2">Б</label> </li> <li class="list-group-item"> <input type="checkbox" id="item3" value="В"> <label for="item3">В</label> </li> <li class="list-group-item"> <input type="checkbox" id="item4" value="Г"> <label for="item4">Г</label> </li> </ul> </div> |
<div class="row"> <div class="col-md-6"> <ul class="list-group"> <li class="list-group-item"> <input type="checkbox" id="item1" value="А"> <label for="item1">А</label> </li> <li class="list-group-item"> <input type="checkbox" id="item2" value="Б"> <label for="item2">Б</label> </li> <li class="list-group-item"> <input type="checkbox" id="item3" value="В"> <label for="item3">В</label> </li> <li class="list-group-item"> <input type="checkbox" id="item4" value="Г"> <label for="item4">Г</label> </li> </ul> </div>
По нажатию кнопки необходимо будет собрать все в массив и отправить , но как сейчас более лаконично проверить все нажатые checkbox'ы???
Сейчас делаю так, но это видимо ооочень криво
let checkboxes = new Array(); $('#modal > div.modal-dialog > div > div.modal-body > div.modal-footer > div > div.col-md-4 > a').click(function() { checkboxes = []; if ($("#item1").is(':checked')) { checkboxes.push($('#item1').val()) } if ($("#item2").is(':checked')) { checkboxes.push($('#item2').val()) } if ($("#item3").is(':checked')) { checkboxes.push($('#item3').val()) } for (let i = 0; i < checkboxes.length; i++) { alert(checkboxes[i]); } }); |
let checkboxes = new Array(); $('#modal > div.modal-dialog > div > div.modal-body > div.modal-footer > div > div.col-md-4 > a').click(function() { checkboxes = []; if ($("#item1").is(':checked')) { checkboxes.push($('#item1').val()) } if ($("#item2").is(':checked')) { checkboxes.push($('#item2').val()) } if ($("#item3").is(':checked')) { checkboxes.push($('#item3').val()) } for (let i = 0; i < checkboxes.length; i++) { alert(checkboxes[i]); } });
Дополнительно:
#modal > div.modal-dialog > div > div.modal-body > div.modal-footer > div > div.col-md-4 > a |
#modal > div.modal-dialog > div > div.modal-body > div.modal-footer > div > div.col-md-4 > a
Адище-то какой...
$('#item1:checked, #item2:checked, #item3:checked').each(function() { checkboxes.push($(this).val()); }); |
$('#item1:checked, #item2:checked, #item3:checked').each(function() { checkboxes.push($(this).val()); });
<div class="col-md-6"> <div class="price btnprice"> <a href="#" class="read" data-toggle="modal" data-target="#modal">Собрать тариф</a> </div> </div> |
<div class="col-md-6"> <div class="price btnprice"> <a href="#" class="read" data-toggle="modal" data-target="#modal">Собрать тариф</a> </div> </div>
Согласен не очень красиво, зато работает. Как лучше реализовать???
let arr = []; let checkboxes = document.querySelectorAll("input[type='checkbox']:checked"); checkboxes.forEach((item) => { arr.push(item.value) }) alert(arr); |
let arr = []; let checkboxes = document.querySelectorAll("input[type='checkbox']:checked"); checkboxes.forEach((item) => { arr.push(item.value) }) alert(arr);
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для выбора только определенных checkbox на странице, можно воспользоваться JavaScript. Вот пример кода, который поможет вам решить эту задачу:
```html
Опция 1
Опция 2
Опция 3
Опция 4
function selectCheckboxes() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function(checkbox) {
if (checkbox.value == '2' || checkbox.value == '4') {
checkbox.checked = true;
} else {
checkbox.checked = false;
}
});
}
```
В данном примере, при нажатии на кнопку "Выбрать определенные", скрипт выберет только checkbox с значениями '2' и '4', остальные checkbox будут сняты. Вы можете адаптировать этот код под вашу конкретную ситуацию, изменив условия выбора checkbox внутри функции `selectCheckboxes()`.