Checking checked in group radio buttons - validate

Checking checked in group radio buttons - validate - javascript

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/

Related

Get all radio inputs from dynamically generated divs

I have a series of dynamically generated div that each one has 4 radio buttons inside:
$(".wrapper").on("custom", ".item", function(){
$.each($(".item"),function(){
// Get all radio names and check if at least one is checked
var radio_groups = [];
$.each($(this).find('input[type="radio"]'), function(){
var myname= this.name;
if($.inArray( myname, radio_groups ) < 0){
radio_groups.push(myname);
}
});
console.log(radio_groups);
return false;
// Check if there is a radio selected for each radio group
for(var i=0; i<radio_groups.length; i++) {
if($(this).find('input[type="radio"][name="' + radio_groups[i] + '"]:checked').length <= 0) {
// $('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.row').append('<p class="input-error">Please select one option.</p>');
$('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.condition').append('<p class="input-error">Please select one option.</p>');
errors = true;
}
}
})
})
$('.item').trigger("custom");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
</div>
I have tried this but doesn't seem to work, mostly the problem is that the .item divs are dynamically generated with php.

I probably didn't understand the problem but why not just use querySelectorAll with a simple forEach like that:
let result = [];
document.querySelectorAll('.item').forEach((el) =>{
const radioboxname = el.querySelectorAll('input[type="radio"]')[0].name;
if(!result.includes(radioboxname)){
result.push(radioboxname);
}
});
console.log(result);
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
</div>
<div class="item">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
</div>
<div class="item">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
</div>
</div>
After comment by OP
I add an array and instead of select all radios i select all item divs and check the name of first radio button compare with array and include if wasn't include

How to sum and subtract total of each radio values using either Javascript or jQuery

I have a multiple radio elements and the options are integer. For each radios, I'm getting the default option to sum up the total.
Then, on change event, I would like to sum or subtract the total based on selected option.
In javascript, I'm able to get the total, but don't know how to sum and subtract values on change. Hereunder my current markup and script:-
var sum = 0;
var $this;
$('.form-item input').each(function() {
$this = $(this);
if ($this[0].checked == true) {
sum += parseInt($this.val());
}
});
$('.form-item input').on('change', function() {
// addition and subtraction here
});
$('.total').html(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="form-type-radio">
<strong>Question 1</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="form-type-radio">
<strong>Question 2</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="form-type-radio">
<strong>Question 3</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="total"><strong>Total:</strong><span>3</span></div>

Just call the adding in the change event of the radio button
Initialize the total inside change event so that you can make the change every time you select and unselect.
Note: Added name for each set of radio button so you can unselect and the setting of total in total span.
$('.form-item input').on('change', function() {
// addition and subtraction here
var $this;
var sum = 0;
$('.form-item input').each(function() {
$this = $(this);
if ($this[0].checked == true) {
sum += parseInt($this.val());
}
$('.total span').html(sum);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="form-type-radio">
<strong>Question 1</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="samename" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="samename" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="samename" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="form-type-radio">
<strong>Question 2</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="samename1" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="samename1" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="samename1" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="form-type-radio">
<strong>Question 3</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="samename2" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="samename2" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="samename2" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="total"><strong>Total:</strong><span>3</span></div>

Radio buttons in the form, if one checked then unchecked the others?

I have three different group of radio buttons in my form. If I click on the radio button I don't see attribute checked set to true. I'm wondering what is the best way to handle this in JQuery/JavaScript? Here is example:
$("input[type=radio]").on('click', function() {
var secondClick = true;
$(this).change(function() {
secondClick = false;
});
$(this).click(function() {
if (secondClick) {
$(this).prop("checked", false);
}
secondClick = true;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frmhs_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>
Function above did not change/set the attribute checked=true on the element that I clicked. I would like to see selected element with an attribute checked true and all other check boxes to be set to false.

var radioInputs = $("#myForm input[type=radio]")
radioInputs.on('change',function() {
var $this = $(this)
if ($this.is(':checked')) {
radioInputs.not($this).removeAttr('checked')
}
})

Your second input in conditions was named frmhs_cond instead of frm_cond
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frm_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>

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

How to select a radio button through jQuery on load?

$("#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.

Develop Reference

JavaScript is the programming language of the Web.

Checking checked in group radio buttons - validate - javascript

Will this fit your needs? var n = $(".group input:checked").length; if(n>0){do something}

Related

Get all radio inputs from dynamically generated divs

How to sum and subtract total of each radio values using either Javascript or jQuery

Radio buttons in the form, if one checked then unchecked the others?

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

How to select a radio button through jQuery on load?

Categories

Resources