I am trying to display different contents base on radio button select in jquery.
My HTML is something like this:
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="b_type" value="1" <?=(isset($type) && $type == 'Person') ? ' checked' : ''?>> Person
</label>
<label class="radio-inline">
<input type="radio" name="b_type" value="2" <?=(isset($type) && $type == 'Institute') ? ' checked' : ''?>> Institute
</label>
</div>
This is how I tried in jquery to display two different contents for each radio button selection.
$('input[type="radio"][name="b_type"]').on('change',function(){
var sel = $(this);
if(sel.val() == 1){
$('#person-block').show();
$('#person-institute').show();
}else{
$('#institute-block').show();
$('#person-block').hide();
});
This code is working in some way. But there is a problem. Default radio button checked is dynamic. Lets assume second button is checked when the page is loading, then it display #persion-block contents. But I want to display #institute-block contents.
If I click on first button and then click on second its working.
Can anybody tell me how to figure this out?
Thank you.
Just trigger the change event in the element inside the document.ready
Note : You have some id typo .
$('input[type="radio"][name="b_type"]').on('change',function(){
alert($(this).val());
if($(this).val() == "1"){
$('#person-block').show();
$('#institute-block').hide();
}else{
$('#institute-block').show();
$('#person-block').hide();
}
});
$(document).ready(function(){
$('input[type="radio"][name="b_type"]:checked').change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="b_type" value="1" > Person
</label>
<label class="radio-inline">
<input type="radio" name="b_type" value="2" checked> Institute
</label>
</div>
<div id="person-block" >
Person
</div>
<div id="institute-block" >
Institute
</div>
You can check which button is checked on page load with the :checked pseudo class (additionally to your existing event handler):
if ($('input[type="radio"][name="b_type"]:checked').val() == 1) {
$('#person-block').show();
} else {
$('#institute-block').show();
}
.block {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="b_type" value="1" > Person
</label>
<label class="radio-inline">
<input type="radio" name="b_type" value="2" checked> Institute
</label>
</div>
<div id="person-block" class="block">
Person
</div>
<div id="institute-block" class="block">
Institute
</div>
Additionally I would recommend hiding both elements on default to avoid showing the content of both before the JS has been loaded.
$(document).ready(function () {
$('input[type="radio"][name="b_type"]').on('change', function () {
var sel = $(this).filter(':checked').val();
if (sel == 1) {
$('#person-block').show();
$('#institute-block').hide();
} else {
$('#institute-block').show();
$('#person-block').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="b_type" value="1" > Person
</label>
<label class="radio-inline">
<input type="radio" name="b_type" value="2" checked> Institute
</label>
</div>
<div style="display:none" id="person-block" class="block">
Person
</div>
<div style="display:none" id="institute-block" class="block">
Institute
</div>
use .is(':checked')
if($('#myradiobutton').is(':checked')){
// this
}else{
// that
}
$("#redio1").click(function(){
$('#person-block').css('display','block');
$('#person-institute').css('display','block');
})
$("#redio2").click(function(){
$('#institute-block').css('display','block');
$('#person-block').css('display','none');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" id="redio1" name="b_type" value="1" <?=(isset($type) && $type == 'Person') ? ' checked' : ''?>> Person
</label>
<label class="radio-inline">
<input type="radio" id="redio2" name="b_type" value="2" <?=(isset($type) && $type == 'Institute') ? ' checked' : ''?>> Institute
</label>
</div>
<div id="person-block" style="color:red;display:none;">person-block</div>
<div id="person-institute" style="color:black;display:none;">person-institute</div>
$(document).ready(function () {
$('input[type="radio"][name="b_type"]').on('change', function () {
var sel = $(this).filter(':checked').val();
if (sel == 1) {
$('#person-block').show();
$('#institute-block').hide();
} else {
$('#institute-block').show();
$('#person-block').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="b_type" value="1" <?=(isset($type) && $type == 'Person') ? ' checked' : ''?> Person
</label>
<label class="radio-inline">
<input type="radio" name="b_type" value="2" <?=(isset($type) && $type == 'Institute') ? ' checked' : ''?>Institute
</label>
</div>
<div style="display:none" id="person-block" class="block">
Person
</div>
<div style="display:none" id="institute-block" class="block">
Institute
</div>
Related
Update 10/21/2021 - I still need a resolution.
Here's the situation: As you can see in the visual example below. I have four - buttons radio - I need to make an event where when I select the option "NO" of the compo I automatically disable the two selections in the field .
If "YES" is selected, the two other selections must remain active. My problem is because the four stamps are "radio buttons" and not a checkbox.
Visual example:
<-- IVF fertilization -->
⬜ Yes
⬜ No
<-- if IVF ovum -->
⬜ Own
⬜ From a donor
And the third code is the HTML part, for analysis.
I have this snippet:
Code 1
Base PHP code I'm using.
<!-- IVF fertilization -->
<div class='col-sm-4'>
<?=_('IVF fertilization')?>
<div>
<input type="radio" id="yesFe" name="niptData_ivfFertilization" value='1'
<?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '1' OR $registration->test->data->ivfFertilization == '1') ? 'checked' : ''?>
>
<label for="yesFe" class='smallLabel'><?=_('Yes')?></label>
</div>
<div>
<input type="radio" id="noFe" name="niptData_ivfFertilization" value='0'
<?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '0' OR $registration->test->data->ivfFertilization == '0') ? 'checked' : ''?>
>
<label for="noFe" class='smallLabel'><?=_('No')?></label>
</div>
</div>
<!-- if IVF ovum -->
<div class='col-sm-4'>
<?=_('If IVF ovum')?>
<div>
<input type="radio" id="ownOv" name="niptData_ovum" value='1' data-validation=""
<?=($_SESSION['OPTIONAL']['niptData_ovum'] == '1' OR $registration->test->data->ovum == '1') ? 'checked' : ''?>
>
<label for="ownOv" class='smallLabel'><?=_('Own')?></label>
</div>
<div>
<input type="radio" id="fromADonor" name="niptData_ovum" value='2' data-validation=""
<?=($_SESSION['OPTIONAL']['niptData_ovum'] == '2' OR $registration->test->data->ovum == '2') ? 'checked' : ''?>
>
<label for="fromADonor" class='smallLabel'><?=_('From a donor')?></label>
</div>
<br>
</div>
CODE 2
Script that working to solve the problem.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#new_user_form *').filter(':radio').change(function() {
if(this.id=='noFe' && this.value=='0' && $(this).is(':checked')) {
$('#new_user_form *').filter(':radio').each(function(){
if(this.id=='noFe' && this.value=='0') {
} else {
$(this).attr("checked",false);
}
});
}
if((this.id=='ownOv' || this.id=='fromADonor' && this.value=='0') {
var checkedId = this.id;
var checkedOrNot = $(this).is(':checked');
$('#new_user_form *').filter(':radio').each(function(){
if(this.id==checkedId && (this.value=='1' || this.value=='2')) {
if(checkedOrNot) {
$(this).attr("disabled",true);
} else {
$(this).attr("disabled",false);
}
}
});
</script>
CODE 3
HTML code that was asked of me.
<div class="col-sm-4">
Pregnancy<span class="required">*</span>
<div class="has-error">
<input type="radio" id="yesFe" name="niptData_ivfFertilization-required0allow" value="1" data-validation="required" class="error" style="border-color: rgb(185, 74, 72);">
<label for="yesFe" class="smallLabel">Yes</label>
<span class="help-block form-error">Required field</span></div>
<div class="has-success">
<input type="radio" id="noFe" name="niptData_ivfFertilization-required0allow" value="0" data-validation="required" class="valid" style="">
<label for="noFe" class="smallLabel">No</label>
</div>
</div>
<div class="col-sm-4">
if FIVET, ovum<span class="optional"></span>
<div>
<input type="radio" id="ownOv" name="niptData_ovum" value="1" data-validation="">
<label for="ownOv" class="smallLabel">Own</label>
</div>
<div>
<input type="radio" id="fromADonor" name="niptData_ovum" value="2" data-validation="">
<label for="fromADonor" class="smallLabel">
As a donor</label>
</div>
<br>
</div>
I dont know if I understand right but here is solution:
1- I deleted the codes that not inportant for that issue
2- I added class name "secondis" to elements that I will disable after checkbox clicked
Hope you got what you wanted
$("#yesFe").click(function(){
if ($(this).prop("checked") == true) {$("#secondissue").show();$(".secondis").prop('disabled', false);}
else {$("#secondissue").hide();$(".secondis").prop('disabled', true);}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
Pregnancy<span class="required">*</span>
<div class="has-error">
<input type="checkbox" id="yesFe" name="niptData_ivfFertilization-required0allow" value="1" data-validation="required" class="error " style="border-color: rgb(185, 74, 72);">
<label for="yesFe" class="smallLabel">Sì</label>
<span class="help-block form-error">Required field</span></div>
<div class="has-success">
<input type="checkbox" id="noFe" name="niptData_ivfFertilization-required0allow" value="0" data-validation="required" class="valid" style="">
<label for="noFe" class="smallLabel">No</label>
</div>
</div>
<div class="col-sm-4" id ="secondissue" style="display:none">
Se FIVET, ovuli<span class="optional"></span>
<div>
<input type="radio" id="ownOv" name="niptData_ovum" value="1" class="secondis" data-validation="" >
<label for="ownOv" class="smallLabel">Propri</label>
</div>
<div>
<input type="radio" id="fromADonor" name="niptData_ovum" class="secondis" value="2" data-validation="" >
<label for="fromADonor" class="smallLabel">Da donatrice</label>
</div>
<br>
</div>
In the below code, show/hide is not happening on page reload. If I check another radio button after page reloading, it's working. Help me to resolve the same.
$(window).load(function(){
$("[name=image_type]").on("change",imageTypeToggle);
})
function imageTypeToggle(){
let selectedValue, $showElements, $hideElements;
selectedValue = $(this).val();
$hideElements = $(this).parents(".image_video_sec").find(".image_sec, .video_sec");
$hideElements.hide().find("input").attr('disabled',true);
if(selectedValue == "0") {
$showElements = $(this).parents(".image_video_sec").find(".image_sec");
} else if(selectedValue == "1") {
$showElements = $(this).parents(".image_video_sec").find(".video_sec");
}
$showElements.show().find("input").attr('disabled',false);
};
<div class="image_video_sec">
<label class="on">
<input type="radio" name="image_type" value="0" checked>R1
</label>
<label>
<input type="radio" name="image_type" value="1">R1
</label>
<dl class="image_sec">Image</dl>
<dl class="video_sec">Video</dl>
</div>
<div class="image_video_sec">
<label class="on">
<input type="radio" name="image_type" value="0" checked>R1
</label>
<label>
<input type="radio" name="image_type" value="1">R1
</label>
<dl class="image_sec">Image</dl>
<dl class="video_sec">Video</dl>
</div>
One way to do it is to trigger a click on the radio button when the document loads. (I changed your $(window).load (which was throwing an error) to $(document).ready.
$("[name=image_type]").eq(0).trigger('click')
$(document).ready(function() {
$("[name=image_type]").on("change", imageTypeToggle);
$(".image_video_sec").each(function() {
$(this).find("[name=image_type]").eq(0).trigger('click')
})
})
function imageTypeToggle() {
let selectedValue, $showElements, $hideElements;
selectedValue = $(this).val();
$hideElements = $(this).parents(".image_video_sec").find(".image_sec, .video_sec");
$hideElements.hide().find("input").attr('disabled', true);
if (selectedValue == "0") {
$showElements = $(this).parents(".image_video_sec").find(".image_sec");
} else if (selectedValue == "1") {
$showElements = $(this).parents(".image_video_sec").find(".video_sec");
}
$showElements.show().find("input").attr('disabled', false);
};
.image_sec,
.video_sec {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image_video_sec">
<label class="on">
<input type="radio" name="image_type" value="0" checked>R1
</label>
<label>
<input type="radio" name="image_type" value="1">R1
</label>
<dl class="image_sec">Image</dl>
<dl class="video_sec">Video</dl>
</div>
<div class="image_video_sec">
<label class="on">
<input type="radio" name="image_type" value="0" checked>R1
</label>
<label>
<input type="radio" name="image_type" value="1">R1
</label>
<dl class="image_sec">Image</dl>
<dl class="video_sec">Video</dl>
</div>
I have 5 if else conditions under function getRadioButtonValue. The function does not go through all the conditions even after clicking the right button combinations.
I have tried to debug the script using Chrome Developer tools but the problem still exists. Where is the code breaking?
Some information regarding the page, I am using Javascript to hide the div's and headers so that at any one time there is only one question seen.
Only the first if conditions work, but nothing else
The results are seen after Get Result button is clicked on the last page which should redirect to the appropriate page.
[DELETED CODE]
[UPDATED CODE]
I am unable to auto hide my div's based on the response given below by Keith.
FYI: His code works as expected.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 445px;
background: #EFDFBC;
}
</style>
</head>
<body>
<div id="first-question" class="visible">
<h3>How?</h3>
<ul>
<li>abc</li>
<li>def</li>
</ul>
<hr>
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
</div>
<div id="second-question" class="hidden">
<h3>To</h3>
<hr>
<input type="radio" name="quiz-question-two" id="quiz-question-two-yes" value="yes" />
<label for="quiz-question-two-yes" id="twoYes">Yes</label>
<input type="radio" name="quiz-question-two" id="quiz-question-two-no" value="no" />
<label for="quiz-question-two-yes" id="twoNo">No</label>
</div>
<div id="third-question" class="hidden">
<h3>Make </h3>
<hr>
<input type="radio" name="quiz-question-three" id="quiz-question-three-yes" value="yes" />
<label for="quiz-question-three-yes" id="threeYes">Yes</label>
<input type="radio" name="quiz-question-three" id="quiz-question-three-no" value="no" />
<label for="quiz-question-three-yes" id="threeNo">No</label>
</div>
<div id="fourth-question" class="hidden">
<h3>This</h3>
<hr>
<input type="radio" name="quiz-question-four" id="quiz-question-four-yes" value="yes" />
<label for="quiz-question-four-yes" id="fourYes">Yes</label>
<input type="radio" name="quiz-question-four" id="quiz-question-four-no" value="no" />
<label for="quiz-question-four-yes" id="fourNo">No</label>
</div>
<div id="fifth-question" class="hidden">
<h3>Work?</h3>
<hr>
<input type="radio" name="quiz-question-five-yes" id="quiz-question-five-yes" value="yes" />
<label for="quiz-question-five-yes" id="fiveYes">Yes</label>
<input type="radio" name="quiz-question-five-no" id="quiz-question-five-no" value="no" />
<label for="quiz-question-five-yes" id="fiveNo">No</label>
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
</body>
</html>
<script type="text/javascript">
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.quiz-question-one && r.quiz-question-two && r.quiz-question-three && r.quiz-question-four && r.quiz-question-five) {
rt.text('All Yes');
} else if (!r.quiz-question-one && !r.quiz-question-two && !r.quiz-question-three && !r.quiz-question-four && !r.quiz-question-five) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.hidden'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('visible');
next_page.addClass('visible');
if (next_page.hasClass('result')) updateResult();
});
});
</script>
I've created an example below that I think you can work from. The values from the radio I don't think get updated until you submit, instead I've captured the results in the onclick. You can now add back you CSS styling etc. Hope that helps.
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.q1 && r.q2 && r.q3) {
rt.text('All Yes');
} else if (!r.q1 && !r.q2 && !r.q3) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.page'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('active');
next_page.addClass('active');
if (next_page.hasClass('result')) updateResult();
});
});
.page {
display: none;
}
.page.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page active">
<div>Question 1</div>
<label for="q1yes">Yes</label>
<input id="q1yes" type="radio" name="q1" value="yes">
<label for="q1no">No</label>
<input id="q1no" type="radio" name="q1" value="no">
</div>
<div class="page">
<div>Question 2</div>
<label for="q2yes">Yes</label>
<input id="q2yes" type="radio" name="q2" value="yes">
<label for="q2no">No</label>
<input id="q2no" type="radio" name="q2" value="no">
</div>
<div class="page">
<div>Question 3</div>
<label for="q3yes">Yes</label>
<input id="q3yes" type="radio" name="q3" value="yes">
<label for="q3no">No</label>
<input id="q3no" type="radio" name="q3" value="no">
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
In the above you are using type="radio", that means all type="radio" with the same name will group together, and not just these two. To group together just give them a name on the input. eg.
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
Above you can see I've given the 2 inputs the name="quiz-question-one", and then for the next question maybe give them a name="quiz-question-two" etc..
On another note, there are lots of places where your code could be simplified, but hopefully this will solve your current problem.
I am working on the following codes where I want the input number to appear only when the radio Mobile Money is selected.
Script:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr('id') == 'mobilemoney') {
$('#mobilemoneynumber').show();
} else {
$('#mobilemoneynumber').hide();
}
});
});
Html:
<form class="form-basic" method="post" action="#">
<div class="form-row">
<label><span>Select one</span></label>
<div class="form-radio-buttons">
<div>
<label>
<input type="radio" name="radio" id="mobilemoney">
<span>Mobile Money</span>
</label>
</div>
<div>
<label>
<input type="radio" name="radio">
<span>Cash on delivery</span>
</label>
</div>
</div>
</div>
<div class="form-row">
<label>
<span>Number</span>
<input type="text" id="mobilemoneynumber" name="mobilemoneynumber">
</label>
</div>
<div class="form-row">
<button type="submit">Submit Form</button>
</div>
</form>
By default when the page is displayed only the input number is displayed and I want it to be displayed by default.
How can I do that ?
Add value to both radio:
<input type="radio" name="radio" value="mobilemoney">
<input type="radio" name="radio" value="cash">
Jquery:
$('input[type="radio"]').click(function() {
if($(this).val() == 'mobilemoney') {
$('#mobilemoneynumber').show();
}
else {
$('#mobilemoneynumber').hide();
}
});
Radio is wrapped in the element 'form-row'. Which is the previous element of the parent of input element.
$('input[type="radio"]').click(function() {
if ($(this).attr('id') == 'mobilemoney') {
$(this).closest(".form-row").next().show();
} else {
$(this).closest(".form-row").next().hide();
}
});
Fiddle
closest(".form-row") will return the parent element which has the classname form-row
The user has to select one radio from each of three input "categories". If he "submits" without doing so, he gets a warning:
http://jsfiddle.net/bqyvS/
Markup like this:
<form>
<div id="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>
Javascript:
$('#link').on('click', function() {
if (!$('#color input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a color!");
}
else if(!$('#shape input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a shape!");
}
else if(!$('#size input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a size!");
}
});
This is a simplified version of a larger piece of code. How can I rewrite the conditional more efficiently so that I'm not verbosely checking each input name? (There should only be one "warning" displayed per "submit", even if multiple input name categories aren't checked.) Editing the markup would be okay.
Thanks!
When applying behavior to similar groups, you should start thinking about classes instead of ids, in this solution, you don't need a separate data-name but I believe it's better to have data separate from html id, but you could use this.id if you prefer
<form>
<div id="color" class="selection-group" data-name="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape" class="selection-group" data-name="square">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size" class="selection-group" data-name="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>
Javascript:
$('#link').on('click', function() {
$('.selection-group').each(function() {
if(!$(this).find('input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a "+ $(this).data('name') +"!");
return false;
}
});
});
function validationCheck() {
var isValid = true,
errorText = "";
$("form div").each( //get the divs that hold the radios and loop
//$("#color, #shape, #size").each( //could do it by ids of the divs also
function(){
var div = jQuery(this), //div reference
isChecked = div.find('input[type="radio"]:checked').length>0; //see if we have anything selected
if (!isChecked) { //if no selections, show error message
isValid = false; //set validation to false
errorText = "Oops! Please choose a " + div.prop("id") + "!"; //build error message
return false; //exit each loop
}
}
);
$('#warning').text(errorText); //set error message
return isValid;
}
$('#link').on('click', function(){
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
$('#warning').text("Oops! Please choose a " + this.id + "!");
});
});
jsFiddle
You may want to consider generating a warning message in the case a user does not select any inputs or only 1 input.
In this example, a user will recieve a message similar to Oops! Please choose a color, and shape!
$('#link').on('click', function(){
var msgs = [];
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
msgs.push(this.id);
});
if(msgs.length > 0)
$('#warning').text("Oops! Please choose a " + msgs.join(", and "));
});
jsFiddle