Получить значение в переменную
Здравствуйте!
Помогите пожалуйста, совсем запутался. Мне нужно получить значение из группы кнопок. Макет кнопок следующий: <div class="col-6 krovColor"> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-primary" name="color" value="Терракотовый">1</button> <button type="button" class="btn btn-secondary" name="color" value="Медный">2</button> <button type="button" class="btn btn-success" name="color" value="Каштановый">3</button> <button type="button" class="btn btn-danger" name="color" value="Коричневый">4</button> <button type="button" class="btn btn-warning" name="color" value="Кирпичный">5</button> </div> </div> Можно ли с такого макета получать значение? Я запутался вот решил спросить. У меня на jQury вот такое начало, но оно не работает:
$(function() {
var color = $('.krovColor > button[name="color"]').val();
console.log(color);
});
Подскажите, что я неправильно делаю. Или правильно эти кнопки на radio переделать, чтобы был переключатель? Я макет верстаю по бутстрапу, есть такой ещё вариант под макет группы кнопок:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
Мне правильно будет перейти на радио группу кнопок? |
MC-XOBAHCK,
$('.krovColor > button[name="color"]').val(); убрать красное, добавить фильтрацию или цикл если нужно |
Я так понял что мне лучше делать радио-переключатель. Вот переписал под группу. Пока классы цветов для кнопок взял бутстраповские, потом перепишу под нужные мне оттенки.
Просьба - посмотрите пожалуйста мой макет, может какие атрибуты лишние и их стоит удалить. <div class="col-6 krovColor"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="color" id="option1" autocomplete="off" value="Терракотовый" checked>1</label> <label class="btn btn-secondary"> <input type="radio" name="color" id="option2" autocomplete="off" value="Медный">2</label> <label class="btn btn-success"> <input type="radio" name="color" id="option3" autocomplete="off" value="Каштановый">3</label> <label class="btn btn-danger"> <input type="radio" name="color" id="option3" autocomplete="off" value="Коричневый">4</label> <label class="btn btn-warning"> <input type="radio" name="color" id="option3" autocomplete="off" value="Кирпичный">5</label> </div> </div> Думаю такой макет с переключателем (радио) правильнее, а визуально он не отличается от предыдущего. По обработке радио кнопок я на jQuery и здесь видел документацию - должен справиться с решением, но если есть готовое решение как правильно брать значение - ругать не буду. Меня интересует какие атрибуты лишние чтобы их убрать. На странице сайта будет похожий переключатель только с другим параметром. |
MC-XOBAHCK,
autocomplete="off" - убрать в тег формы. value="Каштановый">3</label> - это нелогично передавать на сервер текст, а пользователю показывать цифры. Цифры (integer тип), это самое удобное для "распознать/проверить/найти" и они зачастую и являются идентификаторами "каштановых, кирпичных, ...", то что показывают пользователю и чем он оперирует. $('селектор группы').val(); - вернет значение первого из набора, и в случае радио кнопок нужно указывать в качестве селектора выбранную кнопку. |
По value="Каштановый">3</label> я с вами согласен, просто цифры расставил так, чтобы пока не мешало и не путаться.
<div class="col-6 krovColor">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="color" value="Терракотовый" checked>1</label>
<label class="btn btn-secondary">
<input type="radio" name="color" value="Медный">2</label>
<label class="btn btn-success">
<input type="radio" name="color" value="Каштановый">3</label>
<label class="btn btn-danger">
<input type="radio" name="color" value="Коричневый">4</label>
<label class="btn btn-warning">
<input type="radio" name="color" value="Кирпичный">5</label>
</div>
</div>
В скрипте на jQuery я смог получить выбранный value, но я не могу теперь в новую переменную вытянуть результат из обработчика:
$(function() {
var color = $('.krovColor input[name="color"]');
color.change(function krColor() {
var krCol = $(this).val();
//console.log(krCol);
return krCol;
});
var selectedColor = krColor(); //Это неправильно и не работает.
});
Поправьте пожалуйста, как мне теперь в новую переменную получить значение из обработчика? |
$(function() {
$('.krovColor input[name="color"]').change(function() {
var selectedColor = $(this).val();
console.log(selectedColor);
});
});
|
а по путю, вот так
var selectedColor = $('.krovColor input[name="color"]:checked').val();
поместите в ту функцию где она нужна |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 12:28. |