0

Estou tentando pegar o valor do input radio, mas se faço:

document.querySelector('input[name="group1"]:checked').value;

Ele me retorna "ON". Alguém sabe o que pode ser? Esperava que ele me retornasse Red, Yellow ou Green.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal6" class="modal">
        <div class="modal-content">
            <h4>Escolha uma categória</h4>
            <form action="#" id="form">
                <p>
                  <input class="with-gap" name="group1" type="radio" id="test1" />
                  <label for="test1">Red</label>
                </p>
                <p>
                  <input class="with-gap" name="group1" type="radio" id="test2" />
                  <label for="test2">Yellow</label>
                </p>
                <p>
                  <input class="with-gap" name="group1" type="radio" id="test3"  />
                  <label for="test3">Green</label>
                </p>
            </form>
            <a class="waves-effect waves-light btn btn-confirmar" style="width: 80%; margin: 25px 10% 25px 10%;">confirmar</a>
        </div>
    </div>
    
<script type="text/javascript">
$(".btn-confirmar").click(function(){
        var teste = $('input[name="group1"]:checked').val();
        alert(teste);

    });
</script>

1
  • E ae meu caro, blz? Então o problema é que você está recuperando o valor do input e não do Label onde está o seu Red, Yellow... A dica é essa, qualquer coisa dá um toque que tento te passar um código funcionando isso.
    – Rafael
    Commented 5/11/2018 às 14:31

1 Resposta 1

3

Você está pegando o valor da propriedade checked do radio e não o texto da label relacionada ao radio.

Há muitas formas de fazer isso, uma delas é pegar o texto da respectiva label buscando a label irmã do radio checado. Como cada par radio + label estão no mesmo <p>, basta usar .closest e .find e pegar o texto da label com .text():

$(".btn-confirmar").click(function(){
        var teste = $('input[name="group1"]:checked')
        .closest("p")
        .find("label")
        .text();
        alert(teste);

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal6" class="modal">
        <div class="modal-content">
            <h4>Escolha uma categória</h4>
            <form action="#" id="form">
                <p>
                  <input class="with-gap" name="group1" type="radio" id="test1" />
                  <label for="test1">Red</label>
                </p>
                <p>
                  <input class="with-gap" name="group1" type="radio" id="test2" />
                  <label for="test2">Yellow</label>
                </p>
                <p>
                  <input class="with-gap" name="group1" type="radio" id="test3"  />
                  <label for="test3">Green</label>
                </p>
            </form>
            <a class="waves-effect waves-light btn btn-confirmar" style="width: 80%; margin: 25px 10% 25px 10%;">confirmar</a>
        </div>
    </div>

O ideal mesmo era colocar um value em cada radio, desta forma você conseguirá enviar via POST ou GET e pegar o valor mais facilmente usando .val():

$(".btn-confirmar").click(function(){
        var teste = $('input[name="group1"]:checked').val();
        alert(teste);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal6" class="modal">
        <div class="modal-content">
            <h4>Escolha uma categória</h4>
            <form action="#" id="form">
                <p>
                  <input value="Red" class="with-gap" name="group1" type="radio" id="test1" />
                  <label for="test1">Red</label>
                </p>
                <p>
                  <input value="Yellow" class="with-gap" name="group1" type="radio" id="test2" />
                  <label for="test2">Yellow</label>
                </p>
                <p>
                  <input value="Green" class="with-gap" name="group1" type="radio" id="test3"  />
                  <label for="test3">Green</label>
                </p>
            </form>
            <a class="waves-effect waves-light btn btn-confirmar" style="width: 80%; margin: 25px 10% 25px 10%;">confirmar</a>
        </div>
    </div>

Você deve fazer log-in para responder a esta pergunta.