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/
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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With