Значение value

@The Terry · Регистрация: 06.10.2013

Author24 — интернет-сервис помощи студентам

Есть два радиобокса по 3 значения

HTML5

<p>Расоложение перед/зад</p>
                                     <div class="btn-group btn-group-justified style-FrontOrBack">
                                          <label class="btn btn-default">
                                              <input type="radio" name="FORONTBACK" value="Front">
                                              Перед
                                          </label>
                                          <label class="btn btn-default">
                                              <input type="radio" name="FORONTBACK" value="Back">
                                              Зад
                                          </label>
                                          <label class="btn btn-default">
                                              <input type="radio" name="FORONTBACK" value="FrontOrBack">
                                              Любое
                                          </label>
                                      </div>
 
 <p>Расположени лево/право</p>
                                      <div class="btn-group btn-group-justified style-LeftOrRight">
                                          <label class="btn btn-default">
                                              <input type="radio" name="LEFTRIGHT" value="Left">
                                              Лево
                                          </label>
                                          <label class="btn btn-default">
                                              <input type="radio" name="LEFTRIGHT" value="Right">
                                              Право
                                          </label>
                                          <label class="btn btn-default">
                                              <input type="radio" name="LEFTRIGHT" value="LeftOrRight">
                                              Любое
                                          </label>

Как получить значения каждого из двоих радио при клике, если для манипуляций с классами использую:

Javascript

var FB, LR;
$(function() {
    $(".style-FrontOrBack label").click(function(e) {
        e.preventDefault();
        $(".style-FrontOrBack label").removeClass('active');
        $(this).addClass('active');
 
        var value = $(this).val();
        alert(value);
 
    })
});
 
$(function() {
    $(".style-LeftOrRight label").click(function(e) {
        e.preventDefault();
        $(".style-LeftOrRight label").removeClass('active');
        $(this).addClass('active');
 
        LR = $(this).val();
 
    })
});

Но в значение попадает пустая строка, а не value выбранного бокса. Как можно и класс добавить, и значение получить в переменную?(Вставилось с отступом само, не специально)

@sad67man · 21.08.2017, 22:28

The Terry, 1) вы пытаетесь достать value у label

Javascript

1	var value = $('input', this).val();

2) А зачем вы делаете e.preventDefault();? Вы таким образом отменяете действие по умолчанию, т.е. выделение инпута. Таким образом при клике на label вы никак не воздействуете на input, не будет изменяться его состояние (checked) и его значение будет игнорироваться при отправки формы либо при .serialyze()
3) не совсем корректно вешать обработчик на клик по label, правильнее будет вешать на событие change input-a, ведь я к примеру могу изменить состояние инпутов не только по клику, но и программно. Даже в вашем случае, состояние инпута не меняется, однако внешне выглядит как-будто он выделен.

@The Terry · 21.08.2017, 22:55 **[ТС]**

sad67man, про preventDefault понял, спасибо) А так же про то, что достаю у label. На счет того, что обратобчки на label, то могу сказать что просто сделал так чтобы стилизовать radio. Так же состояние импутов у меня как раз таки меняется по нажатию по label.
Вот смотрите, если пойти таким путем, то мне все выводит как нужно, но я уверен что это слишком уж корявый метод
Просто далее мне нужно менять картинку в зависимости от выбранных импутов, а тут из 9 комбинация получается, а это как я понимаю на switch напрашивается, и получается что мне к этому "набору" придется крутить в дополнение и свитч, верно?

Javascript

var FB, LR;
$('input:radio[name=FORONTBACK]').on('change', function () {
    var FB = $(this).val();
    alert(FB);
});
$('input:radio[name=LEFTRIGHT]').on('change', function () {
    var LR = $(this).val();
    alert(LR);
});
 
 
 
$(function() {
    $(".style-FrontOrBack label").click(function() {
        $(".style-FrontOrBack label").removeClass('active');
        $(this).addClass('active');
    })
});
 
$(function() {
    $(".style-LeftOrRight label").click(function() {
        $(".style-LeftOrRight label").removeClass('active');
        $(this).addClass('active');
 
    })
});

@sad67man · 21.08.2017, 23:59

The Terry, Если я правильно вас понял, то у вас получается есть 9 картинок? Измените их названия, к примеру "Front_Left.png", "Back_LeftOrRight.png" и т.д. Таким образом вам не нужны никакой switch, просто берете значения выделенных радиокнопок и составляете имя картинки.

Добавлено через 13 минут
The Terry,

Сообщение от The Terry

Так же состояние импутов у меня как раз таки меняется по нажатию по label.

Я и имел в виду кастомизацию. При e.preventDefault(); не менялся. я как раз это и привел в пример, что это не совсем корректно. Тут можно либо через js написать некую универсальный обработчик, который будет отвечать за внешний вид для всех инпутов типа радио. Либо кастомизировать чисто на css, в таком случае не нужно вкладывать input в label. Вот простой пример

HTML5

<div class="btn-group btn-group-justified style-FrontOrBack">
    <input type="radio" name="LEFTRIGHT" value="Left" id="LEFTRIGHT1">
    <label class="btn btn-default" for="LEFTRIGHT1">Лево</label>
    <input type="radio" name="LEFTRIGHT" value="Right" id="LEFTRIGHT2">
    <label class="btn btn-default" for="LEFTRIGHT2">Право</label>
    <input type="radio" name="LEFTRIGHT" value="LeftOrRight" id="LEFTRIGHT3">
    <label class="btn btn-default" for="LEFTRIGHT3">Любое</label>
</div>

CSS

input[type="radio"] {
  display:none;
}
input[type="radio"]:checked + label {
  background: green;
}

https://jsfiddle.net/j9rhs350/

@The Terry · 22.08.2017, 21:09 **[ТС]**

sad67man, я вас понял, спасибо большое, сделаю именно через css. Но вот вопрос по поводу switch остался, все таки у меня формируется картинка из двух состояний двух radio. Как в этом случае можно поступить?
https://jsfiddle.net/uy7asdyr/

p.s. Изменять картинку правильно через?

Javascript

1	$("#my_image").attr("src","***.jpg");

Добавлено через 1 час 0 минут
Уже во всем разобрался без switch, спасибо

	22.08.2017, 21:09