If I have a radio button group, how can I set the checked property for a given value?
For example
<input type="radio" name="group" value="one" checked>
<input type="radio" name="group" value="two">
If I then wanted to check the second radio button with value 'two' through script, how?
This is what you expect?
<input type="radio" name="group" value="one" checked />
<input type="radio" name="group" value="two" />
<script>
const elements = document.getElementsByTagName('input');
for (const element of elements) {
if (element.value === 'two') {
element.checked = true;
}
}
</script>
You first need to create unique IDs for both radio inputs.
<input type="radio" name="group" value="one" id="inputOne"checked>
<input type="radio" name="group" value="two" id="inputTwo">
Then you can simply set the checked value to true.
document.getElementById("inputTwo").checked = true;
Related
I am trying to get the radio button that originally had checked against it by default and reset the value of it.
In the example below the value is already set to
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="test" value="0" checked>
<input type="radio" name="test" value="1">
<input type="radio" name="test" value="2">
I am using this to select the empty value, but how can I set it to empty first before selecting it?
$('input[name="test"][value=""]').prop('checked', true);
Select the checked input using $('input[name="test"][checked]') and update its value with .val("")
const checkedInput = $('input[name="test"][checked]');
checkedInput.val("");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="test" value="0" checked>
<input type="radio" name="test" value="1">
<input type="radio" name="test" value="2">
You can make an .each on inputs and check if value is empty example:
$('input[name="test"]').each(function() {
if($(this).val() === '') {
//do something
}
});
I have the below html code
<fieldset id="a">
<input type="radio" name="choice1" value="1" radioatrr="0" class="myvalue1" /><label for="choice1">text 1</label>
<input type="radio" name="choice2" value="2" radioatrr="0" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice3" value="3" radioatrr="0" class="myvalue3" /><label for="choice3">text 3</label>
</fieldset>
<fieldset id="b">
<input type="radio" name="cb-choice1" value="4" radioatrr="1" class="myvalue4" /><label for="cb-choice1">text 4</label>
<input type="radio" name="cb-choice2" value="5" radioatrr="1" class="myvalue5" /><label for="cb-choice2">text 5</label>
</fieldset>
I want if choice2 is checked and one of cb-choice1 or cb-choice2 then the received value is the value of cb-... choice (4 or 5) if choice2 is checked and no cb-... is checked then the received value is 2.
How can I do this?
I try this
$("input:checked").each(function(i) {
if (($(this).attr("radioatrr") == 0)) {
alert(($(this).attr("value"));
}
})
but can not working as I want
You can check out this tutorial from W3 to help you out:
https://www.w3schools.com/jsref/prop_radio_value.asp
In regards to your problem, you can hook in this function:
function handleRadioSelection() {
if(document.getElementByName('choice2').checked) {
if (document.getElementByName('cb-choice1').checked) {
return document.getElementByName('cb-choice1').value
} else if (document.getElementByName('cb-choice2').checked) {
return document.getElementByName('cb-choice2').value
} else {
return document.getElementByName('choice2').value
}
}
}
I'm using a hidden input field to capture the value that you want, you can change it to anything else. I've also modified the radio buttons into two groups, as from reading the question/requirements I think that's how it should be setup.
$("#submit").click(function() {
//capture group 1 and group 2 value that's checked
var val1 = $('input[name=choice]:checked').val();
var val2 = $('input[name=choice2]:checked').val();
//capture the input object with the desired value
var sendVal = $('input[name=myval]');
//reset value to 0 as this happens on click, incase value gets changed
sendVal.val(0);
//if group 1 is 2 and there is a value selected in group2
if(val1==2&&val2 != undefined){
sendVal.val(val2);
//if group 1 is 2 and group 2 is not selected
}else if(val1==2&&val2 == undefined){
sendVal.val(val1);
}
//showing value to be sent in an alert
alert(sendVal.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Group 1</h2>
<input type="radio" name="choice" value="1" class="myvalue1" /><label for="choice1">text 1</label>
<input type="radio" name="choice" value="2" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice" value="3" class="myvalue3" /><label for="choice3">text 3</label>
<h2>Group 2</h2>
<input type="radio" name="choice2" value="4" class="myvalue4" /><label for="cb-choice1">text 4</label>
<input type="radio" name="choice2" value="5" class="myvalue5" /><label for="cb-choice2">text 5</label>
<input type="hidden"name="myval" value="0">
<br/>
<button id="submit">submit</button>
I want to know best way to check all the radio button groups are checked in a page.
My code -
<div class="radioGroup">
Question1
<input type="radio" value="1" name="group1"/>1
<input type="radio" value="2" name="group1"/>2
<input type="radio" value="3" name="group1"/>3
<input type="radio" value="4" name="group1"/>4
</div>
<div class="radioGroup">
Question2
<input type="radio" value="1" name="group2"/>1
<input type="radio" value="2" name="group2"/>2
<input type="radio" value="3" name="group2"/>3
<input type="radio" value="4" name="group2"/>4
</div>
<div class="radioGroup">
Question3
<input type="radio" value="1" name="group3"/>1
<input type="radio" value="2" name="group3"/>2
<input type="radio" value="3" name="group3"/>3
<input type="radio" value="4" name="group3"/>4
</div>
<input type="button" value="check all radio Group selected" onclick="validate();"/>
and I wrote a javascript function which works fine but I want a good solution means single selector solution.
function validate(){
var isNotSelected = false;
$(".radioGroup").each(function(i,v){
var grpName = $(this).find("input:first").attr("name");
if($(this).find("[name='"+grpName+"']:checked").val() == undefined){
isNotSelected =true;
}
});
if(isNotSelected){
alert("not all checked");
}
else{
alert("all checked");
}
}
Thanks in advance
You can do
var allChecked = !$('.radioGroup:not(:has(:checked))').length;
demonstration
Check if the number of total groups match the number of groups that contain a checked radio button, if so, all groups have been selected
$('.radioGroup').length === $('.radioGroup:has(input:checked)').length
I want to disable some radio button in a html form according to selected choices, if he select the first choice in the first radio button group the 2 choices in the second radio button group will be enabled, if not they will be disabled, here's my code:
<script language="javascript">
function RadioMeuble() {
if (document.f.radio1[0].checked) {
alert("Vous avez choisi la proposition " + document.f.radio1[0].value);
document.f.radio2[0].disabled = false;
document.f.radio2[1].disabled = false;
} else {
document.f.radio2[0].disabled = true;
document.f.radio2[1].disabled = true;
}
}
}
</script>
<input type="radio" name="radio1" value="L" id="radio1" onBlur="RadioMeuble()">á louer</label>
<br>
<label>
<input type="radio" name="radio1" value="V" id="radio1">á vendre</label>
</p>
<p>Superficie
<label for="textfield"></label>
<input type="text" name="superficie" id="Superficie">en Km ²</p>
<p>Prix
<label for="textfield2"></label>
<input type="text" name="prix" id="Prix">en DT</p>
<p>Meublé
<input type="radio" name="radio2" id="radio2" value="oui" disabled>Oui
<input type="radio" name="radio2" id="radio2" value="non" disabled>
<label for="radio2"></label>
<label for="radio"></label>Non</p>
It doesn't work. What's wrong with it?
There's a "}" too much in your code (last one).
Don't use the onblur EventHandler. You should use onchange or onclick instead.
<input type="radio" name="radio1" value="L" id="radio1" onchange="RadioMeuble()">
or
<input type="radio" name="radio1" value="L" id="radio1" onclick="RadioMeuble()">
HTH,
--hennson
Well, first of all, you have an extra "}" Second, you probably want the click event instead of the blur event. And you want it on both radio buttons. Next what is document.f? That's not a variable. Next, even if it were, I'm not aware of a browser that lets you use form elements like you are trying to. E.g., document.f.radio2[0].disabled. Also, your radio button should have unique ID names.
See: http://jsfiddle.net/vzYT3/1/ for something more sensible.
You could improve your coding a little, check this example:
<input type="radio" id="r1-1" name="r1" value="1">
<label for="r1-1">Option 1</label>
<input type="radio" id="r1-2" name="r1" value="2">
<label for="r1-2">Option 2</label>
<hr />
<input type="radio" id="r2-1" name="r2" value="a">
<label for="r2-1">Option A</label>
<input type="radio" id="r2-2" name="r2" value="b">
<label for="r2-2">Option B</label>
and
function byId(id) {
return document.getElementById(id);
}
window.onload = function() {
byId('r1-1').onchange = byId('r1-2').onchange = function() {
byId('r2-1').disabled = byId('r2-2').disabled = byId('r1-1').checked;
}
}
Running example at: http://jsfiddle.net/5Mp9m/
It wouldn't be a bad idea to use a javascript library like Jquery.
I need to have the number of 'yes's' selected from a set of radio buttons shown in a hidden field.
I have a form with several sets of radio buttons.
The first radio set:
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_1" value="1">
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_2" value="2">
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_3" value="3">
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_4" value="4">
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_5" value="5">
Subject to the value selected above (ie 1,2,3,4,5) then to calculate the radio buttons selected yes from below radio buttons. ie if selected 2 in radio button above then the first two radio button sets need to check for yes. If 4 selected the the first 4 radio sets below need to be checked for yes values.
This is the next five radio sets
<input type="radio" name="set1" id="set1_no" value="no">
<input type="radio" name="set1" id="set1_yes" value="yes">
<input type="radio" name="set2" id="set2_no" value="no">
<input type="radio" name="set2" id="set2_yes" value="yes">
<input type="radio" name="set3" id="set3_no" value="no">
<input type="radio" name="set3" id="set3_yes" value="yes">
<input type="radio" name="set4" id="set4_no" value="no">
<input type="radio" name="set4" id="set4_yes" value="yes">
<input type="radio" name="set5" id="set5_no" value="no">
<input type="radio" name="set5" id="set5_yes" value="yes">
<input type="hidden" name="number_of_yes" value="">
Thanks to the community help I have this JQuery code that calculates the number of yes's in the form and puts the number into the hidden text box 'number_of_yes' on submit.
<script type="text/javaScript">
$(document).ready(function() {
$("#yourFormsId").submit(function() {
$('input[name="number_of_yes"]').val(
$('input:checked[type="radio"][value="yes"]').length);
});
});
</script>
But, this checks for all yes's selected and I need this limited to the first, second, third, fourth or fifth radio sets (ie set1, set2, set3, set4, set5) depending on what is selected from the number_of_sets_to_count radio button (ie 1,2,3,4,5).
Thanks
Try this
$(document).ready(function() {
$("input[name=number_of_sets_to_count]").click(function(){
var radioBtns = $("input[id^='set']");
//First set all the radio buttons to No
radioBtns.filter("[value='no']").attr("checked", true);
//Now set only the required radio buttons to yes
radioBtns.filter("[value='yes']:lt("+parseInt($(this).val())+")").attr("checked", true);
});
$("#yourFormsId").submit(function() {
$('input[name="number_of_yes"]').val($('input:checked[type="radio"][value="yes"]').length);
});
});