How to select a radio button through jQuery on load? - javascript

$("#1").find("Radio1").prop('checked', true);
$("#2").find("Radio1").prop('checked', true);
<div id="1" cvalue='false'>
Are you a student ?
<br> <input type="radio" name="RadioB1" id="Radio1" value="1">
<label for="Radio1">Yes</label><br>
<input type="radio" name="RadioB1" id="Radio2" value="2">
<label for="Radio2">No</label>
</div>
<br/>
<div id="2" cvalue='false' >
Do you study in a university ?
<br>
<input type="radio" name="RadioB1" id="Radio3" class="ui-state-default ui-corner-all" value="1">
<label for="Radio1">Yes</label><br>
<input type="radio" name="RadioB1" id="Radio4" class="ui-state-default ui-corner-all" value="2">
<label for="Radio2">No</label>
</div>
DEMO

First of all name for both the radio class buttons should be kept different to as to select from both the divs.
Second you are finding label and setting its prop, rather you should find the input radio buttons as:
HTML:
<div id="1" cvalue='false'>
Are you a student ?
<br> <input type="radio" name="RadioB1" id="Radio1" value="1">
<label for="Radio1">Yes</label><br>
<input type="radio" name="RadioB1" id="Radio2" value="2">
<label for="Radio2">No</label>
</div>
<br/>
<div id="2" cvalue='false' >
Do you study in a university ?
<br>
<input type="radio" name="RadioB1" id="Radio3" class="ui-state-default ui-corner-all" value="1">
<label for="Radio1">Yes</label><br>
<input type="radio" name="RadioB1" id="Radio4" class="ui-state-default ui-corner-all" value="2">
<label for="Radio2">No</label>
</div>
JS:
$('#1').find('input[name=RadioB1]').filter('#Radio1').prop('checked', true);
$('#2').find('input[name=RadioB2]').filter('#Radio3').prop('checked', true);
See this demo

I'm wondering why you want to use javascript to do this? you can use pure html like this:
<div id="1" cvalue='false'>
Are you a student ?
<br> <input type="radio" name="RadioB2" id="Radio1" value="1" checked="checked">
<label for="Radio1">Yes</label><br>
<input type="radio" name="RadioB2" id="Radio2" value="2">
<label for="Radio2">No</label>
</div>
<br/>
<div id="2" cvalue='false' >
Do you study in a university ?
<br>
<input type="radio" name="RadioB1" id="Radio3" class="ui-state-default ui-corner-all" value="1" checked="checked">
<label for="Radio1">Yes</label><br>
<input type="radio" name="RadioB1" id="Radio4" class="ui-state-default ui-corner-all" value="2">
<label for="Radio2">No</label>
</div>
Note: All you need is to use checked="checked" and use different name to choose multiple for each question.

Related

how can we show/hide div tags using value of radio buttons in jquery or javascript?

hi i am very new to jquery and i am working on show and hide div tags using values of radio buttons. here is my HTML.
<div id="OwnVehicle" style="display:none">
<label>
<input type="radio" name="vehicleList" id="two" onclick="fuelList()" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" onclick="fuelList()" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>
now i need help in writing a jquery code for showing the div tag with id = "two wheeler" when radio button value = 1 and div tag with id = "four wheeler" when radio button value = 2.
thnaks in advance.
sorry for anyone who couldnt understand my question.
try this one
function fuelList(val) {
var val = parseInt(val);
if (val == 1) {
$('#FourWheeler').hide();
$('#TwoWheeler').show();
} else {
$('#TwoWheeler').hide();
$('#FourWheeler').show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="OwnVehicle">
<label>
<input type="radio" name="vehicleList" id="two" onclick="fuelList(this.value)" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" onclick="fuelList(this.value)" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>
Here is what you can do easily with JQuery
$(document).ready(function(){
$("input[name='vehicleList']").click(function(){
var selectedValue = $(this).val();
if(selectedValue === "1"){
$('#TwoWheeler').show();
$('#FourWheeler').hide();
}else{
$('#TwoWheeler').hide();
$('#FourWheeler').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="OwnVehicle">
<label>
<input type="radio" name="vehicleList" id="two" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>
Yiu can try this working code:
function fuelList(_this){
var value=$(_this).attr("value");
$("#TwoWheeler").hide();
$("#FourWheeler").hide();
if(value=="1"){
$("#TwoWheeler").show();
}
else if(value=="2"){
$("#FourWheeler").show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="OwnVehicle">
<label>
<input type="radio" name="vehicleList" id="two" onclick="fuelList(this)" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" onclick="fuelList(this)" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>
Assuming I understood the question correctly, and you want to hide a div when you check a radio button?
Here is an example of how that can be achieved:
HTML:
<input type="radio" name="euResident" id="euResidentYes" value="Yes" checked />
<label for="euResidentYes" class="radio">yes</label>
<input type="radio" name="euResident" id="euResidentNo" value="No" />
<label for="euResidentNo" class="radio">no</label>
<div id='div'>Hello World</div>
Javascript:
function switchVar() {
if($("#euResidentNo").prop("checked"))
$("#div").show();
else
$("#div").hide();
}
$(document).ready(function() {
switchVar();
$("input[name=euResident]").change(switchVar);
});
It is an example using Javascript as this is perfect to use for this.
Demo: http://jsfiddle.net/2Uj9F/169/
Here you go with jsfiddle https://jsfiddle.net/ym10add9/
$("input[type='radio']").change(function() {
$('div').hide();
$( '#' + $(this).attr('value')).show();
});
My first suggestion is to change your onclick="" to onchange="".
<input type="radio" name="vehicleList" id="four" onchange="fuelList(this)" value="2" class="radioButtons" />Four Wheeler
<script>
function fuelList(element)
{
var id = element.value;
if( id == 1)
{
$(".wheels")hide(); //hides all the elements with class = wheels
$("#twoWheelers")show(); //shows the div with id = twoWheelers
}
else if( id == 2 )
{
$(".wheels")hide(); //hides all the elements with class = wheels
$("#fourWheelers")show(); //shows the div with id = fourWheelers
}
}
</script>
and put a class to the div of your "twoWheeler" and "fourWheeler"
I just make it "wheels"
<div id="twoWheelers" class="wheels">
...
</div>
<div id="fourWheelers" class="wheels">
...
</div>
I wrote code as per you describe in your post. May be useful to solve your problem.
$(document).ready(function() {
$('input[type=radio][name=vehicleList]').change(function() {
if (this.value == '1') {
$("#FourWheeler").hide();
$("#TwoWheeler").show();
}
else if (this.value == '2') {
$("#FourWheeler").show();
$("#TwoWheeler").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vehicleList">
<label>
<input type="radio" name="vehicleList" id="two" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" value="2" />Four Wheeler
</label>
</div>
<h5>Output : </h5>
<div id="TwoWheeler" style="display:none">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler" style="display:none">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>
Below is simple JQuery code that will help you to achieve your requirement:
$("input[name='vehicleList']").on('click', function() {
if ($(this).val() == 1) {
$('#TwoWheeler').show();
$('#FourWheeler').hide();
} else {
$('#TwoWheeler').hide();
$('#FourWheeler').show();
}
});
#TwoWheeler,
#FourWheeler {
display: none;
}
#OwnVehicle label,
#TwoWheeler label,
#FourWheeler label {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="OwnVehicle">
<label>
<input type="radio" name="vehicleList" id="two" value="1" />Two Wheeler
</label>
<label>
<input type="radio" name="vehicleList" id="four" value="2" />Four Wheeler
</label>
</div>
<div id="TwoWheeler">
<label>
<input type="radio" name="TwoWheeler" value="6" />Electric
</label>
<label>
<input type="radio" name="TwoWheeler" value="7" />Petrol
</label>
</div>
<div id="FourWheeler">
<label>
<input type="radio" name="FourWheeler" value="1" />Electric
</label>
<label>
<input type="radio" name="FourWheeler" value="2" />Petrol
</label>
<label>
<input type="radio" name="FourWheeler" value="3" />Diesel
</label>
<label>
<input type="radio" name="FourWheeler" value="4" />CNG
</label>
<label>
<input type="radio" name="FourWheeler" value="5" />LPG
</label>
</div>
This is one way to do it:
$( "#r0" ).bind( "click", function() {
$("#OwnVehicle").show();
$("#TwoWheeler").hide();
});
$( "#r1" ).bind( "click", function() {
$("#OwnVehicle").hide();
$("#TwoWheeler").show();
});
Here a working fiddle
https://jsfiddle.net/0aa8w2sj/
It can be improved

Change input text on radio button selection different forms

I am trying to make the input text change when pressing on radio button
the form it self have 5 option with multiple radio buttons and input text
the input text that i am trying to change is in different form since also when changing the input text in the main form it should change it on the other one
i get this for now
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
but this change the input text in the current form
how can i make to change the second form input text
main form
<form action="cart.php" name="cart" id="cart" target="cart"
method="post" onsubmit="return cart();">
<input name="selector0" type="hidden" value="A">
<input name="selector0hyphen" type="hidden" value="-">
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td></tr>
</tbody>
so for now if i press on radio button it change the input in the same form
i need to change the input text on the second form
for example i press on type p it change the first input text in the second form
thanks
Problem in your code:
find("input[type=text]").val(this.value); will give you all the input type=text, and update all of them with this.value, what you really want is to target the specific element, so should be something like .find("input[name=" + this.name + "][type=text]")
Solution:
Use .find("input[name=" + this.name + "][type=text]") to find the last element with name="xxxx" and type=text, this will return only one result since the combination is unique
The idea is to target the single input element you want to update, also you should clean up your code, attribute orders etc, remove id if you are not using it.
UPDATE: change input update radio button.
.find("input[type=radio][name=" + this.name + "][value=" + this.value + "]")
when update your text input, you can target the input where type=radio with same name and same value then use .prop("checked", true) to check it.
$(document).ready(function() {
$("input[type=radio]").click(function() {
$(this).closest('body').find("input[name=" + this.name + "][type=text]").val(this.value);
});
$("input[type=text]").on('input', function() {
$(this).closest('body').find("input[type=radio][name=" + this.name + "][value=" + this.value + "]").prop("checked", true);
});
//init
$("input[type=radio]:checked").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
main form
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector-column-boxhead"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector-column-boxhead">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector-column-boxhead">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td>
</tr>
</tbody>
The form your changing the input is the first form,
select the next form by adding the next method after ( closest( form) )
Don't Forget form tags plus they have to be next to one another.
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').next() .find("input[type=text]").val(this.value);
});
});
$(this).closest() is used to find the closest parent element. It would only select the element that is the parent of $(this) element.
You should give the text inputs unique IDs so that they can be easily identified.
Change this-
<input name="selector1" type="text" value="_" maxlength="3">
To this-
<input name="selector1" id="selector1" type="text" value="_" maxlength="3">
And then in jquery,
$("input[type=radio]").click(function () {
$("#selector1").val(this.value);
});
Try this code
Add a common class to every radio button
$(document).ready(function() {
$('.class_name_of_radio').change(function() {
$("input[type=text][name="+this.name+"]").val(this.value);
});
});
Create a onchange function for all the radio button on all the forms. Pass the value of the radio button on the function and get the value from the function.
Eg:
Function myChange(myRadioVal)
{
$("#inputTextBoxId").val(myRadioVal);
//code here
}

Radio button selecting only one "YES" and one "No" option in a group

I was trying to create something similar to this: https://www.123test.com/disc-personality-test/
Only one "Yes" and one "No" options must be selected in a group, so there wont be two selections in a row or column
I tried to create a basic html grouping:
<div id="main1">
<div id="group1">
<input type="radio" name="group1" class="group1" value="test1">
<input type="radio" name="group1" class="group1" value="test2"> Group 1
</div>
<div id="group2">
<input type="radio" name="group2" class="group2" value="test1">
<input type="radio" name="group2" class="group2" value="test2"> Group 2
</div>
<div id="group3">
<input type="radio" name="group3" class="group3" value="test1">
<input type="radio" name="group3" class="group3" value="test2"> Group 3
</div>
<div id="group4">
<input type="radio" name="group4" class="group4" value="test1">
<input type="radio" name="group4" class="group4" value="test2"> Group 4
</div>
</div>
But i still have no idea about how the Javascript / jQuery code is supposed to be like. If you have better suggestions for the HTML structure, please do suggest that too. The information from this survey is supposed to be uploaded into a database.
Try this one
html-->
<div id="main1">
<div id="group1">
<input type="radio" name="group1" class="team1" value="test1">
<input type="radio" name="group1" class="team2" value="test2"> Group 1
</div>
<div id="group2">
<input type="radio" name="group2" class="team1" value="test1">
<input type="radio" name="group2" class="team2" value="test2"> Group 2
</div>
<div id="group3">
<input type="radio" name="group3" class="team1" value="test1">
<input type="radio" name="group3" class="team2" value="test2"> Group 3
</div>
<div id="group4">
<input type="radio" name="group4" class="team1" value="test1">
<input type="radio" name="group4" class="team2" value="test2"> Group 4
</div>
</div>
javascript-->
$("input:radio").change(function(){
var group = ":radio[name='"+ $(this).attr("name") + "']";
if ($(this).is(':checked')) {
$("input:radio[class^='"+ $(this).attr('class')+"']").each(function(i) {
this.checked = false;
});
$(this).prop('checked', 'checked');
}
});
this working fine for me...
This will do the trick but you must use event binding on radio buttons to check for the condition where two radio buttons are clicked on the same row.
jsfiddle.net/g8gvof06
You have to define the YES buttons with the same name and the NO buttons with the same name to achive the vertical grouping. For each line I would integrate some Javascript which deselects the counterpart of the selected option.
$("input:radio").change(function(){
if ($(this).is(':checked')) {
var name = $(this).attr("name");
$(this).parent().children().each(function(i) {
if(this.getAttribute("name") != name){
this.checked = false;
}
});
}
});
https://jsfiddle.net/yeqsqxcq/
Try this,
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="main1">
<div id="group1">
<input type="radio" name="say_yes" class="group1" value="test1">
<input type="radio" name="say_no" class="group1" value="test2"> Group 1
</div>
<div id="group2">
<input type="radio" name="say_yes" class="group2" value="test1">
<input type="radio" name="say_no" class="group2" value="test2"> Group 2
</div>
<div id="group3">
<input type="radio" name="say_yes" class="group3" value="test1">
<input type="radio" name="say_no" class="group3" value="test2"> Group 3
</div>
<div id="group4">
<input type="radio" name="say_yes" class="group4" value="test1">
<input type="radio" name="say_no" class="group4" value="test2"> Group 4
</div>
</div>
And some Jquery,
$('input').click(function(){
$(this).parent().find('input').not(this).removeAttr('checked');
});
Demo http://jsbin.com/runocizugo/edit?html,js,output
Thanks!

Generate a number for a form selected state

I am working on a product configurator with interdependencies and many options. I'm looking for a solution how to restore the selected state for the form without saving data on the server.
My idea:
the customer makes his choice with checkboxes and radio button on
the website (simple example: http://jsfiddle.net/benroe/6JRAm/5/)
customer print out the custom product with a short number at the
bottom ("configuration number")
the employee in the store types in the "configuration number" on the
website and same selected state (checkbox and radio button) are selected
But how to generate a short number for every possible unique states?
Simple example for the form:
<h1>Product Configurator</h1>
<form>
<p>
<label for="element_3">1: Size</label> <span><input id="element_3_1" name="element_3" class="element radio" type="radio" value="1"> <label class="choice" for="element_3_1">1m</label> <input id="element_3_2" name="element_3" class="element radio" type="radio" value="2"> <label class="choice" for="element_3_2">5m</label> <input id="element_3_3" name="element_3" class="element radio" type="radio" value="3"> <label class="choice" for="element_3_3">10m</label></span>
</p>
<p>
<label for="element_1">2: Color</label> <span><input id="element_1_1" name="element_1" class="element radio" type="radio" value="1"> <label class="choice" for="element_1_1">Green</label> <input id="element_1_2" name="element_1" class="element radio" type="radio" value="2"> <label class="choice" for="element_1_2">Blue</label> <input id="element_1_3" name="element_1" class="element radio" type="radio" value="3"> <label class="choice" for="element_1_3">Black</label></span>
</p>
<p>
<label for="element_2">3: Extra</label> <span><input id="element_2_1" name="element_2_1" class="element checkbox" type="checkbox" value="1"> <label class="choice" for="element_2_1">Special 1</label> <input id="element_2_2" name="element_2_2" class="element checkbox" type="checkbox" value="1"> <label class="choice" for="element_2_2">Special 2</label></span>
</p>
<p><input id="saveForm" class="button_text" type="submit" name="submit" value="Submit"></p>
</form>
<p>Configuration Number: <input type="text"></p>
Something like this? but adding the customer id:
http://jsfiddle.net/6JRAm/23/
$('#saveForm').click(function() {
var configuration='Clien_ID-' + $('input[type=radio]:checked,input[type=checkbox]:checked').map(function() {
return $(this).val();
}).get().join('-');
alert(configuration);
});

Checking checked in group radio buttons - validate

I have:
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
http://jsfiddle.net/jz84u/2/
How can i check if minimum one group is checked in this example? If no then should be alert('error').
I would like use jQuery.
$(".group").each(function(){
})
but how can i check this? For my example should be return error - any input is checked, but if i have:
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4" checked="checked">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
for this example is ok - input in second group is checked.
How can i validate this?
Will this fit your needs?
var n = $(".group input:checked").length;
if(n>0){do something}
Try like below it will work...
Add a button
<input type="button" value="check" id="btnCheck">
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
write a jquery like below
$("#btnCheck").click(function() {
if($(".group input:radio:checked").val())
alert("checked");
else
alert("Nothing checked");
});
Fiddle : http://jsfiddle.net/jz84u/6/

Categories

Resources