JQuery Radio Button Value Check - javascript

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);
});
});

Related

Jquery Radio Button Check Issue

I'm using Jquery to store the value of a checked set of radio buttons into a variable and it works fine, but the issue I'm having is when someone decides to skip the question (skip the set of radio buttons -i.e. don't select an option) the value that is returned in the variable is 'undefined'. I would like to have the value returned as blank (no value) if someone decides to skip a set of radio buttons. Is there an easy method to do this in Jquery?
Jquery:
`var raq1= $('input[type=radio][name=q1]:checked').val();`
HTML:
`<input type="radio" name="q1" id="qn1i5" value="5">
<input type="radio" name="q1" id="qn1i4" value="4">
<input type="radio" name="q1" id="qn1i3" value="3">
<input type="radio" name="q1" id="qn1i2" value="2">
<input type="radio" name="q1" id="qn1i1" value="1">`
What you want to do is check whether $('input[type=radio][name=q1]:checked').val() exists. If it exists, set that value to raq1. If it doesn't, you simply set raq1 to be an empty string.
This can be done with the following ternary:
$('input[type=radio][name=q1]:checked').val() ? $('input[type=radio][name=q1]:checked').val() : ''
And can be seen in the following:
document.getElementsByTagName('button')[0].addEventListener("click", function() {
var raq1 = $('input[type=radio][name=q1]:checked').val() ? $('input[type=radio][name=q1]:checked').val() : '';
console.log(raq1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="q1" id="qn1i5" value="5">
<input type="radio" name="q1" id="qn1i4" value="4">
<input type="radio" name="q1" id="qn1i3" value="3">
<input type="radio" name="q1" id="qn1i2" value="2">
<input type="radio" name="q1" id="qn1i1" value="1">
<button>Get Values</button>
Hope this helps!

three radio buttons with sub radio buttons need to hide or show the div using jquery

I am working on jQuery hide or show function. I have three radio buttons and two sub radio button will be available initially if user select the first radio button and user select children first / second radio button one div will be shown in the second scneario if user select second radio button / third radio button from the parent and sub radio button second div should come. I am not getting how to do the if condition
Here is the fiddle link
Here is my HTML code
<input type="radio" value="one" checked name="number" />One
<input type="radio" value="two" name="number" />two
<input type="radio" value="three" name="number" />three
<br/>
<input type="radio" checked value="onea" name="numbers" />one A
<input type="radio" value="twoa" name="numbers" />two A
<br/>
<div class="first">First</div>
<div class="second">second</div>
<div class="third">third</div>
Here is my current jquery code
$(".second,.third").hide();
$('input[type="radio"]').change(function () {
if ($(this).val() === 'onea' || 'twoa') {
$(".first").show();
}
});
for the first radio button was working perfectly as expected but not for second third radio button
this is what i want
for example there are two scenarios 1) by default the one radio button was and one A radio button was checked the first div will show 2) if the user select two radio button / three radio button and sub one A / two A second div will show I am not getting the second scenarios
Thanks in advance
Try this..jsfiddle
<input type="radio" value="one" name="number" />One
<input type="radio" value="two" name="number" />two
<input type="radio" value="three" name="number" />three
<br/>
<input type="radio" checked value="onea" name="numbers" id="first" />one A
<input type="radio" value="twoa" name="numbers" id="second"/>two A
<br/>
<div class="first divcont">First</div>
<div class="second divcont">second</div>
<div class="third divcont">third</div>
$(".second,.third").hide();
$('input[type="radio"]').on("change",function () {
var FVal = $('input[name="number"]:checked').val();
console.log(FVal);
if(FVal!='one'){
$(".divcont").hide();
$(".second").show();
}else{
$(".divcont").hide();
$(".first").show();
}
});

selecting form elements with javascript

if you have this code:
<form name="thing">
<label>Are you a student?</label>
<input name="choice" type="radio" value = "yes" checked />yes
<input name="choice" type="radio" value="no" />no
</form>
then you can select the radios like so:
document.thing.choice[i].value
And then I assumed that in this case:
<form name="thing">
<label name ="yes_no">Are you a student?
<input name="choice" type="radio" value = "yes" checked />yes
<input name="choice" type="radio" value="no" />no
</label>
</form>
then you could select the radio values like so:
document.thing.yes_no.choice[i].value
why does this work for form and not label? Is it because form is an object in the DOM and label is not?
Also, is the name attribute valid for form still? Or should one only use ID's...

Disable radio button according to selected choice

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.

How to deselect radio button when another radio button is selected?

I was wondering if there is a way where i have i 2 groups of radio button
eg
group 1
<input type="radio" name="things" value="car" /> car
<input type="radio" name="things" value="car" />pen
<input type="radio" name="things" value="car" />TV
group2
<input type="radio" name="things" value="exam" /> exam
<input type="radio" name="things" value="journey" />journey
the question is if i select radio button from group2
Eg exam it should deactivate radio butons car And Tv from group1 and allow only pen radio button active
Modifying your HTML a bit
<div id="grp1">
<input type="radio" name="things" value="car" /> car
<input type="radio" name="things" value="pen" />pen
<input type="radio" name="things" value="tv" />TV
</div>
<div id="grp2">
<input type="radio" name="things" value="exam" /> exam
<input type="radio" name="things" value="journey" />journey
</div>
$(function(){
$("#grp2 input:radio[name='things']").change(function(){
$("#grp1 input:radio[name='things'][value!='pen']").attr("disabled", true);
});
});
See a working demo
$("input[value="exam"]").click(function() {
$("input[value=\"car\"").attr("disabled", "disabled");
});
This should disable the "car" input when the exam radio button is clicked.

Categories