it-blog.club
Получить выбранные чекбоксы и радио

Получить выбранные чекбоксы и радио

Я прекрасно понимаю, что данная тема может быть уже заезженна, но к сожалению я до сих пор встречаю случаи когда программисты пытаются получиться выбранные checkbox и radio подобным образом:


var inp = $('input[checked]');

или


var imp = $('input[checked=true]');

А потом спрашивают почему у них ничего не работает.

Именно по этому я и решил написать статью о том, как следует получать проставленные инпуты при помощи селектора :checked

Допустим у нас есть форма такого вида:

Я не буду её полностью заполнять, а просто для примера создам пару необходимых инпутов.


<form>

<div>
<p>Выберите чекбокс</p><span style="background-color: #e9ebec; color: #222222;">
</span><input type="checkbox" name="testCheck" value="testCheck-1">
<input type="checkbox" name="testCheck" value="testCheck-2">
</div>

<div>
<p>Выберите радио</p>
<div>
<input type="radio" name="testRadio" value="testRadio-1" id="test1">
<label for="test1">testRadio-1</label>
</div>
<div>
<input type="radio" name="testRadio" value="testRadio-2" id="test2">
<label for="test2">testRadio-2</label>
</div>

</div>
<input type='submit' value='Отправить'>
</form>

Ну и давайте выведем в консоль  выбранные элементы при отправке формы


$('body').on('submit','form',function(){
var objForm = $(this);//Получаем формы
var imp = $('input:checked',objForm);//Получаем выбранные инпуты внутри этой формы
console.log(imp);
});

Конечно сейчас мы выведем в консоль не сами элементы, а объект. Если вы всё же в консоль хотите вывести html код выбранных элементов, то тогда может посмотреть вот в этой статье как это сделать при помощи $.each()

Собственно на этом всё.


it-blog.club 437
Автор: Ярослав Хмель


Если Вам понравилась статья, то можете поддержать блог переведя N сумму на кофе авторам или оплату хостинга!
В любом случае спасибо! А так же не забывайте про группу в ВК
ПОИСК ПО САЙТУ
Поддержать