Develop Reference

Get the value of a radio button using jquery [duplicate]

This question already has answers here:
How to check a radio button with jQuery?
(33 answers)
Closed 6 years ago.
I have this portion of code:
var checkout_options = $("#checkout").find("input[type='radio']");
$('#button-account').on('click', function () {
alert(checkout_options.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
<p>Checkout Options:</p>
<label for="register">
<input type="radio" name="account" value="register" id="register" checked>
<b>Register Account</b></label>
<br>
<label for="guest">
<input type="radio" name="account" value="guest" id="guest">
<b>Guest Checkout</b>
</label>
<input type="button" value="Continue" id="button-account">
</div>
What I want it is to get the value of the selected radio button but with my code I only get the first radio button value, the second radio does not work.
Kindly help me fix the error.

You need to use this to refer the element inside the callback. So get value by using this.value or $(this).val() method. Although avoid :checked pseudo-class selector otherwise it only selects the first element.
var selected = $("#checkout").find("input[type='radio']");
selected.change(function(){
alert(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
<p>Checkout Options:</p>
<label for="register">
<input type="radio" name="account" value="register" id="register" checked>
<b>Register Account</b></label>
<br>
<label for="guest">
<input type="radio" name="account" value="guest" id="guest">
<b>Guest Checkout</b>
</label>
</div>
You can make it simpler using :radio pseudo-class selector
$("#checkout :radio").change(function() {
alert(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
<p>Checkout Options:</p>
<label for="register">
<input type="radio" name="account" value="register" id="register" checked>
<b>Register Account</b>
</label>
<br>
<label for="guest">
<input type="radio" name="account" value="guest" id="guest">
<b>Guest Checkout</b>
</label>
</div>

Your handler is only being attached to the radio button that is checked, so no handler exists for the second radio button. Attach a handler to both radio buttons:
var $radioBtn = $( "#checkout" ).find( "input[type='radio']" );
$radioBtn.on( 'change', function() {
if ( this.checked ) {
alert( this.value );
}
});

It didn't work, because you register the event handler for the initially checked value only. This is how to make it dynamically reflect the value change:
var selected = $("#checkout").find("input[name='account']");
selected.change(function(){
alert($(this).val());
});
This also makes sure that only the current radio button group is included, so you can have additional ones.
Jsfiddle:
https://jsfiddle.net/sjmhdasw/

Just use
$("input[type='radio']").on("change", function() {
console.log(this.id + " checked !");
});
It binds an event listener on all the inputs of type radio !
No need to store the selectors inside a variable (unless you're doing something with it, somewhere else in your code)

jQuery multiple show hides in one form

I have a form with a number of questions on it, some are a yes/no. If yes is selected, it will display a text box asking for more info. I've got the show/hide part to work but once I click a button elsewhere on the page it then hides the textarea and i lose the info.
Currently I'm using this:
JQuery
$(document).ready(function () {
$(".text").hide();
$("#r1").click(function () {
$(".text").show();
});
$("#r2").click(function () {
$(".text").hide();
});
});
HTML
<input type="radio" name="radio1" id="r1" value="Yes">
<input type="radio" name="radio1" id="r2" value="No">
<div class="text">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>

You need to target the textarea relative to the checkboxes being checked.
I've listened for the change event, rather than click (there are other ways of changing a radio button other than clicking it)
I've used .nextAll() and .first() to get the relevant textarea
I've also used toggle() with this.value == 'Yes' which will be expressed as a true or false value and therefore show or hide the element respectively.
$('.text').hide();
$('input[type=radio]').on('change', function(){
$(this).nextAll('.text').first().toggle( this.value == 'Yes' );
});
JSFiddle

OP here, if anyone is looking for the answer using buttons instead I resolved the issue with advice from Norlihazmey Ghazali who mentioned to target the specific id.
For example:
<div class="btn-group btn-toggle">
<input type="button" class="btn btn-default" id="taxliabl1" value="Yes"></input>
<input type="button" class="btn btn-default" id="taxliabl2" value="No"></input>
<br>
<div class="taxliabltext">
<br>
<textarea class="form-control" rows="3" id="comment"></textarea>
<br>
Jquery:
$(document).ready(function () {
$(".taxliabltext").hide();
$("#taxliabl1").click(function () {
$(".taxliabltext").show();
});
$("#taxliabl2").click(function () {
$(".taxliabltext").hide();
});
});

jquery in yii: Detecting radiobutton losing check mark (checked state)

Given the following code (yes, i know it is perhaps irrelevant in yii, but I added the tag so I update the question with the actual generated html):
<script>
$(function(){
$('#widgetId-form input[name="valueType"]').change(function(){
if ($(this).is(":checked"))
{
console.log("habilitando "+$(this).data("class"));
$("."+$(this).data("class")).prop("disabled", false);
}
else
{
console.log("deshabilitando "+$(this).data("class"));
$("."+$(this).data("class")).prop("disabled", true);
}
}).change();
});
</script>
<div id="widgetId-dialog">
<form id="widgetId-form" action="/support/test" method="post">
<div>
<input id="valueType-single" value="single" data-class="singleValueField" checked="checked" type="radio" name="valueType" />
<label for="single">Valor simple</label>
<input size="6" class="singleValueField" type="text" value="" name="singleValue" id="singleValue" />
</div>
<div>
<input id="valueType-range" value="range" data-class="rangeValueField" type="radio" name="valueType" />
<label for="range">Rango (inicio:fin:intervalo)</label>
<input size="6" class="rangeValueField" type="text" value="" name="rangeValue_start" id="rangeValue_start" />:<input size="6" class="rangeValueField" type="text" value="" name="rangeValue_end" id="rangeValue_end" />:<input size="6" class="rangeValueField" type="text" value="" name="rangeValue_interval" id="rangeValue_interval" />
</div>
</form>
</div>
It doesn't trigger change() when a radio becomes unchecked. This implies: controls are disabled only on initialization (.ready()). change() is not triggered individually by controls losing the checkmark.
Question: how can I detect when a radio button loses the checkmark?

This is a conceptional problem. The radio buttons are seen somehow like one element. For closer information look at Why does jQuery .change() not fire on radio buttons deselected as a result of a namesake being selected?.
So the change-event will always only fire on the newly selected element and not on the deselected radios. You could fix your code like this:
$(function(){
$('#widgetId-form input[name="valueType"]').change(function(){
//could be also hardcoded :
$('input[name="' + $(this).attr("name") + '"]').each(function(){
if ($(this).is(":checked"))
{
console.log("habilitando "+$(this).data("class"));
$("."+$(this).data("class")).prop("disabled", false);
}
else
{
console.log("deshabilitando "+$(this).data("class"));
$("."+$(this).data("class")).prop("disabled", true);
}
});
});
$('#widgetId-form input[name="valueType"]:first').change();
});
You can check it at http://jsfiddle.net/jg6CC/. Greets another Luis M. ;)

CSS is not changing through calling JS in HTML

my JS code is bellow:
// JavaScript Document
function bubbleColor() {
if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked"))
{
$(".bubble").css("background-color", "red");
}
}
var el = document.getElementById(".bubble");
el.onclick = bubbleColor;
And my targeted HTML:
<div id="circle" class="bubble">
<p class="circle_text">
#6
</p>
</div>
<br/><br/>
<input type="checkbox" value="1" id="Checkbox1" name="Checkbox1"/> Answer one <br/>
<input type="checkbox" value="1" id="Checkbox2" name="Checkbox2"/> Answer two <br/>
<input type="checkbox" value="1" id="Checkbox3" name="a3"/> Answer three <br/>
Desired output:
When somebody checks [selects] both the Checkbox1 and Checkbox2, the #6 background should be Red color.
Problem:
The code does not seem to work.
Any help please?

Im assuming you are using jquery (as you are changing css with jquery)
The behaviour you describe in your question implies that changing the checkbox should trigger a verification, so why do you attach the bubbleColor function to clicking on the .bubble div?
Try something like this:
// Alternatively you could use a class to select the checkboxes
$("input[type='checkbox']").change(bubbleColor);
Ofcourse ideally you should change your function to remove the red color if you uncheck the boxes:
function bubbleColor() {
if ($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked")) {
$(".bubble").css("background-color", "red");
} else {
$(".bubble").css("background-color", "transparent");
}
}
Fiddle: http://jsfiddle.net/sQCcF/2/
Edit:
If what you want is to ensure user only selects 1 option then you should use radio buttons instead of checkboxes, as that is the default behavior:
<input type="radio" name="inputname" value="1"/>
<input type="radio" name="inputname" value="2"/>
<input type="radio" name="inputname" value="3"/>
The name has to be the same for the inputs, but each one will have a different value, selecting one will automatically unselect the other.

Problem is at
var el = document.getElementById(".bubble");
You are selecting element with ID of .bubble (bubble is a class)
Change it to and check :
var el = document.getElementById("circle");

First of all you attach an event handler for the click event on div with class "bubble".
Then, you use document.getElementById method to select an element but you use as argument the class of that element, not the ID.
For this to work you need to attach the click event handler to checkbox elements.
Something like this:
$('input[type="checkbox"]').click(function() {
bubbleColor();
});

Replace var el = document.getElementById(".bubble");
el.onclick = bubbleColor;
with
$(".bubble").click(bubbleColor) ;
should work.

Try this code
HTML
<div id="circle" class="bubble">
<p class="circle_text">
#6
</p>
</div>
<br/><br/>
<input type="checkbox" value="1" id="Checkbox1" name="Checkbox1" class="chBox"/> Answer one <br/>
<input type="checkbox" value="1" id="Checkbox2" name="Checkbox2" class="chBox" /> Answer two <br/>
<input type="checkbox" value="1" id="Checkbox3" name="a3" class="chBox" /> Answer three <br/>
JQUERY
$(document).ready(function(){
// you can use '.chBox class or input[type='checkbox']'
$('.chBox').bind('click', function(){
if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked"))
{
$(".bubble").css("background-color", "red");
}else{
$(".bubble").css("background-color", "#fff");
}
});
});

Show/hide textfile depending on radio buttons' selection

I know this is a repeated question, but I cannot make it run. I tried all the solutions I found here in SO and googling...
I have this radio button form in my page. What I want is that when the user selects the 'only one attendee' option a text field appears ONLY for this option. If the user selects another one it dissapears.
Once the user selects only one option, the text box appears.
I've been trying doing with javascript. I use this piece of code
<script>
$(document).ready(function()
$("#send_to_one").hide();
$("input:radio[name="people"]").change(function(){
if(this.checked){
if(this.value =='one'){
$("#send_to_one").show()
}else{
$("#send_to_one").hide();
}
}
}
});
</script>
The form's code is
<div id="send_to">
<input type="radio" id="send_poll" name="people" value="all" checked="checked">all the attendees</br>
<input type="radio" id="send_poll" name="people" value="one" >only one attendee<br/>
<div id="send_to_one">
<label>Write the attendee's name: </label><input type="text" id="attendeename"><br/><br/>
</div>
<input type="radio" id="send_poll" name="people" value="group">a group of attendees</br>
</div>
I've checked that the javascript files are loaded. I also tried putting the javascript code inside the html.erb file where the form is, in a separated .js file and in application.htm.erb's <head></head> section, but no luck. Where do I need to put each part of code exactly in order to work?
Using Rails 3.0.4, Ruby 1.8.9. I'm also using JQuery

LIVE DEMO
HTML:
<div id="send_to">
<input type="radio" id="send_poll" name="people" value="all" checked="checked" />all the attendees<br/>
<input type="radio" id="send_poll" name="people" value="one" />only one attendee<br/>
<div id="send_to_one">
<label>Write the attendee's name: </label><input type="text" id="attendeename" /><br/><br/>
</div>
<input type="radio" id="send_poll" name="people" value="group" />a group of attendees<br/>
</div>
jQ:
$(document).ready(function(){
$("#send_to_one").hide();
$("input:radio[name='people']").change(function(){
if(this.value == 'one' && this.checked){
$("#send_to_one").show();
}else{
$("#send_to_one").hide();
}
});
});

$(document).ready(function() {
$("#send_to_one").hide();
$("input:radio[name='people']").change(function(){
if(this.checked){
if(this.value =='one'){
$("#send_to_one").show()
}else{
$("#send_to_one").hide();
}
}
});
});
Your code was right, but a few missing braces, brackets, and unescaped quotes. Are you using any form of smart javascript editor? Because you really should...
http://jsfiddle.net/7yt2A/