Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

fastest way to get the checked radio button using jquery

Tags:

html

jquery

I wanted to get the selected radio button and display the text that corresponds the radio button using jquery.

<div id="Poll">
    <div id="PollQuestion">Your favorite color?</div>
    <ul>
        <li class="liAnswer">
            <input type="radio" value="1" name="Answer" class="clsAnswer"/>
            <span>Red</span>
        </li>
        <li class="liAnswer">
            <input type="radio" value="2" name="Answer" class="clsAnswer"/>
            <span>Blue</span>
        </li>
        <li class="liAnswer">
            <input type="radio" value="3" name="Answer" class="clsAnswer"/>
            <span>Green</span>
        </li>
        <li class="liAnswer">
            <input type="radio" value="4" name="Answer" class="clsAnswer"/>
            <span>Yellow</span>
        </li>
    </ul>
    <input type="button" value="Submit Vote" id="btnVote"/>
</div>

First, check if there is no selected color and then display the selected color and the corresponding value.

How can I do that?

Here is my code in jsfiddle
http://jsfiddle.net/LhFPD/1/

like image 310
Carls Jr. Avatar asked Dec 01 '22 03:12

Carls Jr.


1 Answers

working solution here

$("#btnVote").click(function(){
    var selected = $(".clsAnswer:checked");
    if(!selected.val()){
        alert('No color selected!')
    }
    else{
        var selectedValue = selected.val();
        var selectedName = selected.siblings().text();
        alert("Color: " + selectedName + "\r\nValue: " + selectedValue );
    }
});

Solves the problem :)

like image 89
Carls Jr. Avatar answered Dec 05 '22 00:12

Carls Jr.