Jquery .val() function to check the value of radio buttons - javascript

Below is my logic to check the value of each of the radio buttons. I am using a part of their id's to get hold of the radio buttons. However, my code is always returning a value based on the value of my first radio button. I want it to return the value of each radio button. For example if radio button clicked is yes, then value returned should be 1. Else, 0. Any body who can update my code please.
$('.YesNoRadio').each(function() {
if ($('[id*="YesNo_RadioButtonList_"] input[type="radio"]:checked').val() == 1) {
//$('[id*="AddAttachment"]').trigger('click');
$('[id="upload"]').click();
}
});
Html:
//For yes radio button
<input id="_YesNo_RadioButtonList_0" type="radio" name="YesNo_RadioButtonList" value="1">
//For no
<input id="_YesNo_RadioButtonList_0" type="radio" name="YesNo_RadioButtonList" value="0">

Your selector is incorrect, Remove space from selector. When you use " " it indicates you are targeting child elements i.e. Descendant Selector (“ancestor descendant”)
if($('[id*="YesNo_RadioButtonList_"]:radio:checked').val() == 1)
$('[id="upload"]').click();
And, You don't need .each()

//For yes radio button
<input class="YesNoRadio" id="_YesNo_RadioButtonList_0" type="radio" name="YesNo_RadioButtonList" value="1">
//For no
<input class="YesNoRadio" id="_YesNo_RadioButtonList_0" type="radio" name="YesNo_RadioButtonList" value="0">
<script type="text/javascript">
$('.YesNoRadio').each(function() {
if ($(this).is(':checked')) {
alert($(this).val());
//code for yes radio button
$('[id="upload"]').click();
}else{
alert($(this).val());
//code for no radio button
}
});
</script>

A method that worked for me was setting the name in the html input tag the same for each radio button is your list, which you did:
<input id="_YesNo_RadioButtonList_0" type="radio" name="YesNo_RadioButtonList" value="1">
<input id="_YesNo_RadioButtonList_0" type="radio" name="YesNo_RadioButtonList" value="0">
then I would do this is my JS with JQuery.
var radioButtonValue = $("input[name='YesNo_RadioButtonList']:checked").val();
This should give you the value of your radio button. The value, in your case, is preset in you input tag.

Try this code
$('.YesNoRadio').each(function() {
if ($('[id*="YesNo_RadioButtonList_"] input[type="radio"]:checked').val() == 1) {
//$('[id*="AddAttachment"]').trigger('click');
console.log($(this).val());
$('[id="upload"]').click();
}
});

Related

How can I get the value of the radio button after click

How will I get the value of the radio button after clicked on the button?
document.getElementById('btnKnop1').addEventListener('click', function(){
var kleuren = document.querySelectorAll('input[type=radio');
for (var i in kleuren) {
kleuren[i].onclick = function(){
document.getElementById('divResult'). innerHTML =
'Gekozen kleur: ' + this.value;
}
}
});
<input type="radio" name="radioGroup" value="rood" checked />Rood</br />
<input type="radio" name="radioGroup" value="blauw" />Blauw</br />
<input type="radio" name="radioGroup" value="geel" />Geel</br />
<input type="radio" name="radioGroup" value="groen" />Groen</br />
<button id="btnKnop1">Check de waarde!</button>
<div id="divResult"></div>
Now it depends on click on the radio button, but I'd to depend on click on the button
The issue seems to be be the inner click event on the radio button. If you change the loop to an if statement checking if it's checked then you can output the value on the button click:
document.getElementById('btnKnop1').addEventListener('click', function(){
var kleuren = document.querySelectorAll('input[type=radio');
for (var i in kleuren) {
if (kleuren[i].checked === true) {
document.getElementById('divResult'). innerHTML =
'Gekozen kleur: ' + kleuren[i].value;
}
}
});
<input type="radio" name="radioGroup" value="rood" checked />Rood</br>
<input type="radio" name="radioGroup" value="blauw" />Blauw</br>
<input type="radio" name="radioGroup" value="geel" />Geel</br>
<input type="radio" name="radioGroup" value="groen" />Groen</br>
<button id="btnKnop1">Check de waarde!</button>
<div id="divResult"></div>
First of all, please consider using english-named variables, it will improve readability by a lot.
Second of all, line
var kleuren = document.querySelectorAll('input[type=radio');
has a typo, it's missing a closing square bracket - ].
To check a checkbox/radio button value you can use checkbox.checked, where checkbox is your DOM object selected by querySelector.
You're basically already doing it. When you click the button, in the click handler for the button, just grab the radio button element using a selector (either class or id), with a "querySelector" call (just like you're doing). Inspect that element for whatever property makes sense (probably "checked").
Something like:
<button onclick="onClick ()">Click Me</button>
...
onClick () {
const kleuren = document.querySelector ( [mySelectorByIDorClass, etc.] );
console.log ( kleuren.checked );
}
See here:
https://www.w3schools.com/jsref/prop_radio_checked.asp
The checked property will tell you whether the element is selected:
if (document.getElementById('id').checked) {
var variable = document.getElementById('id').value;
}

Radio Button will activate if Textbox value is equal to the radio button value

What I exactly want to do is that, Onload, the radio button will be active if the onload value of the Textbox is equal to the value of the radio button.
Is this possible to happen.
Thanks!
Easy and simple way to use by using below concept:
$(document).ready(function(){
if($('#TxtValue').val() == $('#RadioValue').val()){
$('#RadioValue').attr('checked',true)
}
else{
$('#RadioValue').attr('checked',false)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="TxtValue" value="somevalue"/>
<input type="radio" id="RadioValue" value="somevalue"/>matched value
<input type="radio" id="RadioValue" value="somevalue1232"/>not matched value

Trigger Button Click when Radio button is selected

I have two radio buttons, when I select one of radio button (ex: id = one), and click button will be show alert ("one").
here is my code
<input type="radio" name="test" value="one" id="one">one
<input type="radio" name="test" value="two" id="two">two
<button id="click">Click</button>
and my JS
$("#click").click(function(){
if($('input[type="radio"]').attr('id') == 'one'){
alert ("one")
} else{
alert("two")
}
})
My question is why alert two is not show? any body help? thank you
http://jsfiddle.net/dedi_wibisono17/gydrw291/10/
See the docs on .attr:
The .attr() method gets the attribute value for only the first element in the matched set. To get the value for each element individually, use a looping construct...
Because your selector
input[type="radio"]
will always return a collection that contains the #one element in front, your if statement will always evaluate to true.
To fix it, have your selector string select only the radio button that's selected - so, use the :checked psuedo-selector as well:
$("#click").click(function() {
if ($('input[type="radio"]:checked').attr('id') == 'one') {
alert("one")
} else {
alert("two")
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="test" value="one" id="one">one
<input type="radio" name="test" value="two" id="two">two
<button id="click">Click</button>

Check value of radio buttons

<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer"> Beer<br>
<input type="radio" name="group2" value="Wine" checked> Tee
<span id="check" >check</span>
And jQuery:
function check()
{
alert($('input[name=group2]').val());
}
$('#check').click(function(){
check();
});
$('input[name=group2]').change(function(){
check()
})
Live: http://jsfiddle.net/j9cj5/
Why this always show me Water? How can i check value of these radio buttons? I would like check this if i change this value and if i click on check.
The selector $('input[name=group2]') will select all the elements with that name, and val() returns only the value for the first element in the collection, so that's always Water. You have to target just the checked radio :
function check() {
alert( $('input[name=group2]:checked').val());
}
FIDDLE
Replace $('input[name=group2]') with $('input[name=group2]:checked') :)
Demo: http://jsfiddle.net/hungerpain/j9cj5/2/
The reason this happens is because $('input[name=group2]') will generate an array of all your radio buttons and thus will give only the first element (which happens by default). So get the selected element, you must use the :checked pseudo selector.
Try like this
function check(val) {
alert(val);
}
$('input[name=group2]').change(function(){
check($(this).val());
});
This is working FIDDLE

How to set radio button status with JavaScript

What method would be best to use to selectively set a single or multiple radio button(s) to a desired setting with JavaScript?
Very simple
radiobtn = document.getElementById("theid");
radiobtn.checked = true;
the form
<form name="teenageMutant">
<input value="aa" type="radio" name="ninjaTurtles"/>
<input value="bb" type="radio" name="ninjaTurtles"/>
<input value="cc" type="radio" name="ninjaTurtles" checked/>
</form>
value="cc" will be checked by default, if you remove the "checked" non of the boxes will be checked when the form is first loaded.
document.teenageMutant.ninjaTurtles[0].checked=true;
now value="aa" is checked. The other radio check boxes are unchecked.
see it in action: http://jsfiddle.net/yaArr/
You may do the same using the form id and the radio button id. Here is a form with id's.
<form id="lizardPeople" name="teenageMutant">
<input id="dinosaurs" value="aa" type="radio" name="ninjaTurtles"/>
<input id="elephant" value="bb" type="radio" name="ninjaTurtles"/>
<input id="dodoBird" value="cc" type="radio" name="ninjaTurtles" checked/>
</form>
value="cc" is checked by default.
document.forms["lizardPeople"]["dinosaurs"].checked=true;
now value="aa" with id="dinosaurs" is checked, just like before.
See it in action: http://jsfiddle.net/jPfXS/
Vanilla Javascript:
yourRadioButton.checked = true;
jQuery:
$('input[name=foo]').prop('checked', true);
or
$("input:checkbox").val() == "true"
You can also explicitly set value of radio button:
<form name="gendersForm">
<input type="radio" name="gender" value="M" /> Man
<input type="radio" name="gender" value="F" /> Woman
</form>
with the following script:
document.gendersForm.gender.value="F";
and corresponding radio button will be checked automatically.
Look at the example on JSFiddle.
/**
* setCheckedValueOfRadioButtonGroup
* #param {html input type=radio} vRadioObj
* #param {the radiobutton with this value will be checked} vValue
*/
function setCheckedValueOfRadioButtonGroup(vRadioObj, vValue) {
var radios = document.getElementsByName(vRadioObj.name);
for (var j = 0; j < radios.length; j++) {
if (radios[j].value == vValue) {
radios[j].checked = true;
break;
}
}
}
Try
myRadio.checked=true
<input type="radio" id="myRadio">My radio<br>
$("#id_of_radiobutton").prop("checked", true);
I am configuring a radio button within a document fragment and tried using radiobtn.checked = true;.
That didn't work so I instead went with this solution:
radiobtn.setAttribute("checked", "checked");
This sets checked using name to cycle through the elements and a value check to set the desired element to true. I kept it as simple as possible, its pretty easy to put it into a function or a loop, etc.
variable 'nameValue' is the radio elements name value
variable 'value' when matched sets the radio button
Array.from( document.querySelectorAll('[name="' + nameValue + '"]') ).forEach((element,index) =>
{
if (value === element.value) {
element.checked = true;
} else {
element.checked = false;
}
});

Categories