How to check if at least one radio button is checked - javascript

I'm actually stuck on my form validation because I want to check if there is at least one radio button checked. I did this for my text input validation successful but for the radio buttons it doesn't work.
$('#next').click(function() {
var isValid = true;
$('.personal-informations, .gender, .goal').each(function(i, obj) { //.personal-informations are my text inputs in another section of my form and .gender and .goal are my radio button classes
if ($(this).val().trim() === '') {
$("html, body").animate({scrollTop: $('.progressbar-header').offset().top-100}, 250);
$(this).closest('.questions').find('.error').css("visibility","visible");
$(this).css('border-color', "#B33C3D");
$(this).closest('.questions').find('.error').text('Dies ist ein Pflichtfeld.');
isValid = false;
}
if ($(this).is(':checked').length > 0) {
} else {
$(this).closest('.questions').find('.error').css("visibility","visible");
$(this).closest('.questions').find('.error').text('This field is required.');
isValid = false;
}
});
});
<div class="field goals-icon goals">
<span class="title">Some Text</span>
<div class="questions">
<div class="questions-fc-1 questions-fcm-2 radio-button">
<input id="muscle-goal_1" name="goal" class="goal" value="1" aria-required="true" type="radio">
<label id="fc-goal_1" aria-controls="#muscle-goal_1">
<img src="" alt="">
<span>Some Text</span>
<div class="error"></div><!--This is my error class which should be visible if there is no checkbox from this section checked-->
</label>
</div>
<div class="questions-fc-1 questions-fcm-2 radio-button">
<input id="weight-loss-goal_2" name="goal" class="goal" value="2" aria-required="true" type="radio">
<label id="fc-goal_2" aria-controls="#weight-loss-goal_2">
<img src="" alt="">
<span>Some Text</span>
</label>
</div>
<div class="questions-fc-1 questions-fcm-2 radio-button">
<input id="figure-workout-goal_3" name="goal" class="goal" value="3" aria-required="true" type="radio">
<label id="fc-goal_3" aria-controls="#figure-workout-goal_3">
<img src="" alt="">
<span>Some Text</span>
</label>
</div>
<div class="questions-fc-1 questions-fcm-2 radio-button">
<input id="health-goal_4" name="goal" class="goal" value="4" aria-required="true" type="radio">
<label id="fc-goal_4" aria-controls="#health-goal_4">
<img src="" alt="">
<span>Some Text</span>
</label>
</div>
</div>
</div>
<div type="next" id="next" class="forward-button"></div>

.is() returns true, false, or undefined, so checking for truth without the .length works. Also you need to re-factor that conditional to traverse up the dom tree to the container (or form), then look for siblings within that.
Replace this:
if ($(this).is(':checked').length > 0) {
With this:
if ($(this).parents('.questions').find('input[type="radio"]').is(':checked')) {
Based on your example, I'm not sure if you need to tweak the .parents() or .find() selectors. You may need to make them more specific to stick to the groups of radios (rather than finding all radios). Here is a demo, look at the console and it will log validate fails: https://jsfiddle.net/jpnaccn3/

Related

How do I write a function that blocks the button until the checkbox is activated?

I wrote a function that blocks the button until the checkbox is activated.
But, the function does not find the checkbox.
Please, tell me, what am I doing wrong?
function simpleFunc(checkName, aName) {
$(document).on('change', "[name=checkName]", function() {
var e2 = $(".card__link").attr('name', aName);
e2.addClass('probka2');
if (this.checked) {
e2.addClass('btn_active');
e2.removeClass('btn_passive');
} else {
e2.addClass('btn_passive')
e2.removeClass('btn_active');
}
});
}
<div class="card__container">
<div class="img__container">
<img src="/lorem-pict.jpg" alt="">
</div>
<div class="text__container">
<h2 class="card__title">
name
</h2>
<p class="card__descr">description</p>
<form name="forma1" action="" class="card__form">
<input class="ch1" type="checkbox" checked="checked" name="check" onClick="simpleFunc(ch1, f1)" ;>
<label for="">I agree with the terms of the offer </label>
</form>
<div class="btn__container">
details
</div>
</div>
</div>
<script type="text/javascript" src="/js/jquery.js"></script>
You don't need the function call onClick if your bind the change event. You can modify your code like below.
If checkbox is checked then removed the disabled attribute and if not then add the disabled attribute which will prevent the button from clicking. You can apply css class also on top of that.
Create a function which will accept the checkbox name and anchor link name as arguments, call this function in checkbox onClick event handler.
Based on that you can disable or enable individual card anchor link.
Note: for disabling anchor I am using 'pointer-events: none' css .
function activateLink(checkName,linkName){
var checked = $('[name='+checkName+']').prop("checked");
if (checked) {
$('[name='+linkName+']').removeClass('disableClick');
} else {
$('[name='+linkName+']').addClass('disableClick');
}
}
.disableClick{
pointer-events: none;
color:grey;
}
.btn__container {
padding:15px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card__container">
<div class="img__container">
<img src="/lorem-pict.jpg" alt="">
</div>
<div class="text__container">
<h2 class="card__title">
name
</h2>
<p class="card__descr">description</p>
<form name="forma1" action="" class="card__form">
<input class="ch1" type="checkbox" checked="checked" name="check" onClick="activateLink('check','f1')" ;>
<label for="">I agree with the terms of the offer </label>
</form>
<div class="btn__container">
details
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card__container">
<div class="img__container">
<img src="/lorem-pict.jpg" alt="">
</div>
<div class="text__container">
<h2 class="card__title">
name 1
</h2>
<p class="card__descr">description 1</p>
<form name="forma1" action="" class="card__form">
<input class="ch1" type="checkbox" checked="checked" name="check1" onClick="activateLink('check1','f11')" ;>
<label for="">I agree with the terms of the offer </label>
</form>
<div class="btn__container">
details
</div>
</div>
</div>
</div>
I have updated the answer based on your use case, please check.

How will I make an If College is Check then this Course would be in the dropdown?

So I am trying to do an that If the College is selected in the checkbox then the college course would show like
BS-IT,
BS-IT-DA,
BS-CS
in the drop-down
else if the senior high is check then the strand would show
GAS,
IT,
CS.
I don't know if it is required with the JavaScript or
J-Query
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<label><input type="checkbox">College Student</label>
<label><input type="checkbox" class="senior-high" >Senior High</label>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
</div>
//first add id="collage" on collage checkbox and add class="checkbox" on all checkbox add senior_highcheckbox id on senior hs checkbox
$(document).on('click','.checkbox'function(){
if($('#college').is('checked')){
$('#course').append(`<option>BS-IT </option>
<option>BS-IT-DA</option>
<option>BS-CS</option>`);
$('#senior_highcheckbox').attr('checked',false);
}else{
$('#course').append(`<option>GAS</option>
<option>IT</option>
<option>CS</option>`);
$('#college').attr('checked',false);
}
})
I've amended your HTML slightly so I can find the ID with jQuery. What you want to do is to listen out for the checkbox with Jquery and then check its ID attribute. If the attribute is equal to 'college' then append the first list of items. Otherwise it must be the other checkbox so append the others.
$(':checkbox').click(function() {
if ($(this).attr('id') === 'college') {
$('#Course').append($('<option></option>').html('BS-IT'), $('<option></option>').html('BS-IT-DA'), $('<option></option>').html('BS-CS'));
} else {
$('#Course').append($('<option></option>').html('GAS'), $('<option></option>').html('IT'), $('<option></option>').html('CS'));
}
$(':checkbox').attr("disabled", true);
});
$('#cancel').click(function() {
$(':checkbox').prop("checked", false);
$(':checkbox').attr("disabled", false);
$('#Course').empty();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<input type="checkbox" id="college" name="college">
<label for="college">College Student</label>
<input type="checkbox" id="senior-high" name="senior-high">
<label for="senior-high">Senior High</label>
</div>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
<button id="cancel">Cancel</button>
</div>

How to target the last of type visible element with jquery

I need some help I have a drupal webform in which new form elements show conditionally if the previous text input has content.
What I’m trying to do is select all inputs that are currently visible and then specifically target the last one (the most recently shown).
The issue is this targets the last child within each .form-item rather than the last form item itself directly.
$(".webform").on("change", function() {
$(".form-item:visible").each(function() {
if ($(this).is(":last-of-type")) {
//Do whatever
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="webform">
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:none">
</div>
</div>
You can simplify your flow by using this jQuery:last selector
$('.form-item:visible:last')
You may apply the below code on form field change or form submit, depending on your requirements.
<div class="webform">
<div class="form-item" style="display:block">
<input type="text" value="1" />
</div>
<div class="form-item" style="display:block">
<input type="text" value="2" />
</div>
<div class="form-item" style="display:block">
<input type="text" value="3" />
</div>
<div class="form-item" style="display:none">
<input type="text" value="4" />
</div>
</div>
<script>alert($(".form-item:visible:last input").val());</script>

Hide/Show divs based on check box selection

I want to show / hide divs based on check box selection.
here is the scenario,
I have two check box in a div named decider,
selecting check box one should show Div box-one
selecting check box two should show Div box-two
Once someone has made the selection, i want the decider div to hide. I am not being able to make this work
$(function() {
$('.decider').removeClass('hide');
$('.box-one').addClass('hide');
$("#optionTwo").click(function() {
$('#optionOne').attr("checked",false);
});
$("#optionOne").click(function() {
$('#optionTwo').attr("checked",false);
});
$("#send-decide").click(function() {
if($('#optionTwo').is(':checked')){
$('.decider ').addClass('hide');
$('.box-one').removeClass('hide');
}
if($('#optionOne').is(':checked')){
$('.decider ').addClass('hide');
$('.box-two').removeClass('hide');
}
});
});
<div class="decider hide">
<p style="font-size:10px;color:#000;">Please select an option below</p>
<label class="checkbox">
<input id="optionTwo" type="checkbox" name="Request" value="Request" />
Select Box one </label>
<label class="checkbox">
<input id="optionOne" type="checkbox" name="Download" value="Download" />
Select Box two </label>
<br />
<span class="select">
<input type="button" id="send-decide" alt="submit" value="select" />
</span> </div>
<div class="box-one">
<p>this is first box</p>
</div>
<div class="box-two hide">
<p>this is second box</p>
</div>
You are missing .hide class display:none property css.. Rest everything is fine
$(function() {
$('.decider').removeClass('hide');
$('.box-one,.box-two').addClass('hide');//add hide to both the class
$("#optionTwo").click(function() {
$('#optionOne').attr("checked",false);
});
$("#optionOne").click(function() {
$('#optionTwo').attr("checked",false);
});
$("#send-decide").click(function() {
if($('input[type="checkbox"]:checked').length)//check whether any checkbox is checked
{
//if yes go ahead and do what you wanted to do
$('.decider ').addClass('hide'); //hide it in any case
if($('#optionTwo').is(':checked')){
$('.box-one').removeClass('hide');
}
if($('#optionOne').is(':checked')){
$('.box-two').removeClass('hide');
}
}
else
alert('select a checkbox');//if not display some message to user
});
});
.hide{
display:none; //add this property
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="decider hide">
<p style="font-size:10px;color:#000;">Please select an option below</p>
<label class="checkbox">
<input id="optionTwo" type="checkbox" name="Request" value="Request" />
Select Box one </label>
<label class="checkbox">
<input id="optionOne" type="checkbox" name="Download" value="Download" />
Select Box two </label>
<br />
<span class="select">
<input type="button" id="send-decide" alt="submit" value="select" />
</span> </div>
<div class="box-one">
<p>this is first box</p>
</div>
<div class="box-two">
<p>this is second box</p>
</div>

show a field if only a certain radio button is checked

i have two radio buttons used in my form and follow to those two radio buttons i have another field.
I want to show that field if only a certain radio button is checked.otherwise by default it should be hidden.
My code
Payment Type
<div class="list">
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">
Immediate Payment
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">
Scheduled Payment
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
<label><h4><b>Effective Date*</b></h4></label>
<input type="date" >
Here i want to show effective date field only if the user checks the Scheduled Payment radio button. How can i do this?
$("input[name=group]").change(function () {
if ($(this).val() == 'scheduled' && $(this).is(":checked")) {
$("#effectiveWrapper").show();
} else {
$("#effectiveWrapper").hide();
}
});
http://jsfiddle.net/wdckktz7/
AngularJS Code
<div ng-show="payment == 'scheduled'">
<label>
<h4><b>Effective Date*</b></h4>
</label>
<input type="date" />
</div>
http://jsfiddle.net/orr1p1eg/
$("input:radio[name='group']").click(function() {
var value = $(this).val();
if (value == 'Scheduled Payment'){
$("#div").show();
}
else {
$("#div").hide();
}
});
and put your date input inside the div:
<div id="div">
<label><h4><b>Effective Date*</b></h4></label>
<input type="date" >
</div>

Categories