Question

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/

Answer 1

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 🙂