Get the value of radio with javascript

Asked

Viewed 128 times

0

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

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

He returns to me "ON". Does anyone know what it might be? I was hoping he’d get back to me Red, Yellow or 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>

javascript jquery

  • And my dear, blz? So the problem is that you are recovering the value of input and not of Label where is your Red, Yellow... The tip is this, anything gives a touch that I try to pass you a code running this.

1 answer

3


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

There are many ways to do this, one of them is to get the text of the respective label searching for the radio’s sister label checked. As each pair radio + label are in the same <p>, just use .closest and .find and pick up the 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>
<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>

The ideal thing was to put one value on each radio, this way you will be able to send via POST or GET and pick up 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>
<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>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.