I want to get the value of selected radio button.
When no radio is selected it shows undefined correctly. However, when i click on any radio button also it shows undefined.
How can i do this in either javascript or jquery.
HTML code:
<div id="rates">
<input type="radio" class="demo" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" class= "demo"id="r2" name="rate" value="Variable Rate"> Variable Rate
<input type="radio" class="demo" id="r3" name="rate" value="Multi Rate"> Multi Rate
</div>
JS:
console.log($('.demo:selected').val());
Fiddle: http://jsfiddle.net/eLJ4s/1/
You need to register a change event, your current console.log is only at run-time, when nothing is checked:
$(":radio[name=rate]").change(function() {
console.log(this.value);
});
try this something like this..
$('#element').click(function() {
if($('#radio_button').is(':checked')) { alert("it's checked"); }
});
You'd have to bind the click event of the checkbox, as the change event doesn't work in IE.
$('#radio_button').click(function(){
// if ($(this).is(':checked')) alert('is checked');
alert('check-checky-check was changed');
});
Now when you programmatically change the state, you have to trigger this event also:
$('#radio_button').attr("checked", "checked");
$('#radio_button').click();
You can change your code accordingly below is the sample
Working samples :
select-a-radio-button-with-jquery
check-if-radio-button-is-checked
$(function(){
$("input[type='radio']").change(function(){
alert($(this).val());
});
});
Related
I try to get the value of the checked radio button by javascript.
<input value="3" type="RADIO" name="ME" onclick="go_to_url ( 'OPT3' , this.value );">
But JS does not give me any value even the event is where the button is?
Why?
How can I get the value of the clicked radio button in a way I do not have to change the function?
This code has no problem.
Check this out
<input value="3" type="radio" name="ME" onclick="go_to_url( 'OPT3' , this.value );">
function go_to_url(label, value) {
console.log(label);
console.log(value);
}
https://jsfiddle.net/f7gkesxo/
Use for your button an id then you can use document.getElementById to get your element and addEventListener to add an click-event. The on-click in your HTML delete.
document.getElementById('btn').addEventListener('click', function() {
console.log(this.value);
})
<input value="3" id='btn' type="RADIO" name="ME">
document.querySelector('input[type="radio"]').addEventListener('click', function() {
go_to_url('OPT3' , this.value);
});
When I loop over all checkboxes with class .category attached and try to change the visual output of the checkbox to checked, nothing happens. Variable 'state' returns true or false and is used to change the element it's current visual output. At this very moment nothing happens and I don't know why.
HTML:
<input type="checkbox" class="category">checky 1</span>
<input type="checkbox" class="category">checky 2</span>
<input type="checkbox" class="category">checky 3</span>
JS:
$('body').on('click','.category',click);
function click(){
$('.category').each(function(i,element){
var state = $(element).prop('checked');
$(element).prop('checked', state);
});
return false;
}
Thanks in advance.
Note that nothing happens because you're using return false in event handler. That will prevent (un)checking the checkbox.
If you're trying to implement Select All option, just do:
$(".category:first").on("click", function() {
$(".category").prop("checked", this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" class="category"/> Select all</label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
Try this to set your checkboxes checked.
$('body').on('click','.category',click);
function click(){
$('.category').each(function(i,element){
element.value='checked';
});
return false;
}
Try this code:
$('body').on('click','.category',click);
function click(){
$('.category').each(function(i,element){
var state = $(element).prop('checked');
$(element).prop('checked', state ? '' : 'checked');
});
return false;
}
If you perform a test over your code, you will see that the way you are trying to grab the elements is not correct. Class "category" does not exist. What you have is "category-desktop". SO if you test like this:
alert($( 'input' ).hasClass( "category" ));//False
alert($( 'input' ).hasClass( "category-desktop" ));//True
I think you are trying to do this:
$('body .category-desktop').on('click',function(){
alert("click ok");
//run your function
});
See fiddle http://jsfiddle.net/yruhL69v/4/
But to finish the code I need to understand if you want to click over any check box, or over any place on the body,or any element that has category-desktop indise body .
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. ;)
I have to control the checked status a list of checkboxes from another checkbox.
HTML:
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" name="recipe.read" type="checkbox" value="1" rel="read">
<input id="group.read" name="group.read" type="checkbox" value="1" rel="read">
<input id="ingredients.read" name="ingredients.read" type="checkbox" value="1" rel="read">
</div>
JS:
$('#readall').click(function()
{
var checkStatus = $(this).is(':checked');
var checkboxList = $('#permGrid input[rel="read"]');
$(checkboxList).attr('rel', 'read').each(function(index)
{
if(checkStatus == true)
{
$(this).attr('checked', 'checked');
console.log($(this).attr('checked'));
}
else
{
$(this).removeAttr('checked').reload();
console.log($(this).attr('checked'));
}
});
});
The above code seems fine but the check/uncheck works only for the first time. But when I click the main checkbox second time, it doesn't change the status of other checkboxes into 'checked'. Is there anything I need to do?
I found something similar here. I compared the code and mine and this code is somewhat similar but mine doesn't work.
Try using prop, and shorten the code alot like this
$('#readall').click(function () {
var checkboxList = $('#permGrid input[rel="read"]')
checkboxList.prop('checked', this.checked);
});
DEMO
You can't use a method .reload like this
$(this).removeAttr('checked').reload();
// returns Uncaught TypeError: Object #<Object> has no method 'reload'
Remove it, and it will work.
JSFiddle
Use a class for all the checkboxes which you need to change on click of some checkbox. Like:
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
I have added a class="toChange" to all the checkboxes except the first one.
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
<input id="group.read" class="toChange" name="group.read" type="checkbox" value="1" rel="read" />
<input id="ingredients.read" class="toChange" name="ingredients.read" type="checkbox" value="1" rel="read" />
</div>
Then use the following script:
$('#readall').click(function(){
var checkStatus = $(this).is(':checked');
if(checkStatus){
$(".toChange").attr('checked', 'checked');
}
else{
$(".toChange").removeAttr('checked')
}
});
Demo
Page code as below:
<input type="radio" class="direct" name="r1" value="first" />
<span class="proxy">radio1</span>
<input type="radio" class="direct" name="r1" value="second" />
<span class="proxy">radio2</span>
js code as below:
$('.direct').click(function(e) {
var obj = $(this).parent(),
value = obj.find('input:checked').val();
if(value){
alert('you click ' + value + ' button');
}else{
alert('you did not click a button');
}
});
$('.proxy').click(function(e) {
$(this).prev().click();
});
Here is the example on JSFiddle
My question is:
why clicking on span text does not work like clicking directly on radio button?
As i said earlier, question was not clear, at least for me. however, if you want to get the radio checked when clicked on next span, you can do this way:
$('.proxy').click(function(e) {
$(this).prev().attr('checked', true)
});
If you use a label with for attribute set to the correct input, you could avoid all this problem.
<input type="radio" class="direct" name="r1" id="r11" value="first"/>
<label class="proxy" for="r11">radio1</label>
<input type="radio" class="direct" name="r1" id="r12" value="second"/>
<label class="proxy" for="r12">radio1</label>
DEMO