Get the value of 'radio' with javascript

Question

Get the value of 'radio' with javascript

Navigation

#1 by (3 votes)

0

I'm trying to get the value of input radio , but if I do:

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

It returns me " ON ". Does anyone know what can it be? I was expecting it to return me Red , Yellow or Green .

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="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>

javascript jquery

asked by anonymous 05.11.2018 / 15:09

1 answer

Return amount of dependents per employee How to validate if a value is a tuple having a string and an integer? [closed]

score 3 · Accepted Answer

You are getting the value of the checked radio property and not the label text related to the radio.

There are many ways to do this, one of them is to get the text of the respective label looking for the sister label of the radio checked. Since each radio + label pair is in the same <p> , just use .closest and .find and get label text with .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><divid="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>

The ideal thing is to put value on each radio, so you can send via POST or GET and get the value more easily using .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><divid="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>