I have the following code:
JavaScript:
jQuery(".cbChild").on("change", function () {
//go to parent checkbox to see if it's check. If not, check it.
var parentElement = jQuery(this).closest('cbParentContainer');
//I've also tried
//var parentElement = jQuery(this).parentsUntil('cbParentContainer');
//And
//var parentElement = jQuery(this).parentsUntil('row');
if (jQuery(this).find('input[type=checkbox]').prop("checked")) {
parentElement.prop("checked", true);
}
});
HTML:
<div class="cbEventsContainer">
<div class="row">
<span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label>
</span>
</div>
<div class="cbChildContainer">
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label>
</span>
</div>
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label>
</span>
</div>
</div>
When one of the child checkboxes (class='cbChild') gets checked, I want to force the parent (class='cbParent') checkbox to also be checked. However, I'm unable to access the parent for some reason. The call to parentElement.prop("checked", true) fails because parentElement isn't the parent checkbox. To further clarify the issue, there are multiple cbEventsConainers with more parent/child checkboxes. I only included one for this post.
We are not dealing with a child-parent relationship here but the following will check the "parent" checkbox when at least one of the children is checked and will uncheck it otherwise.
$(function(){
$("body").on("change",".cbChild input",function(){
var cc=$(this).closest(".cbChildContainer"),p=cc.prev("div").find(".cbParent input");
p.prop("checked",$(".cbChild input:checked",cc).length>0);
});
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="cbEventsContainer">
<div class="row">
<span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label>
</span>
</div>
<div class="cbChildContainer">
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label>
</span>
</div>
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label>
</span>
</div>
</div>
Related
Please see the issue in action, here: https://streamable.com/n6np71
The issue is secluded to this area of code:
// check "Show all" on page load
$('#menu-checkbox-filters-all').prop('checked', true);
$(".filters input:not(#menu-checkbox-filters-all)").prop("checked", false);
var $checkboxes = $('.filters input');
$checkboxes.change(function(event){
let currentTarget = event.currentTarget;
// if all is selected, deselect others
if (currentTarget.id == "menu-checkbox-filters-all")
$(".filters input:not(#menu-checkbox-filters-all)").prop("checked", false);
else // remove the checked prop from all
$("#menu-checkbox-filters-all").prop("checked",false);
// if none is checked anymore, check all
if (!$checkboxes.filter(":checked").length)
$("#menu-checkbox-filters-all").prop("checked", true)
var filters = [];
// get checked checkboxes values
$checkboxes.filter(':checked').each(function(){
filters.push( this.value );
$grid.isotope();
});
filters = filters.join(', ');
$contentContainer.isotope({ filter: filters });
});
<div class="filter-menu">
<div class="menu-headers-section">
<div class="menu-tag"></div>
<div class="menu-language-checklist">
<h3 class="menu-heading">Language</h3>
</div>
<div class="menu-captions-checklist">
<h3 class="menu-heading">Captions</h3>
</div>
</div>
<div class="menu-content-section">
<div class="menu-tag">
<div class="list-content-section list-section-language-tags">
<div class="list-language-tag tag-language-all"><img class="icon-flag" src="/ASSETS/icon-star.svg" alt="">All</div>
</div>
</div>
<div class="menu-language-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value="*" id="menu-checkbox-filters-all">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="menu-content-section">
<div class="menu-tag">
<div class="list-content-section list-section-language-tags">
<div class="list-language-tag tag-language-irish"><img class="icon-flag" src="/ASSETS/icon-flag-ireland.svg" alt="">Irish</div>
</div>
</div>
<div class="menu-language-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value=".language-irish" id="language-irish">
<span class="checkmark"></span>
</label>
</div>
<div class="menu-captions-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value=".captions-irish" id="captions-irish" test-value="AAA">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="menu-content-section">
<div class="menu-tag">
<div class="list-content-section list-section-language-tags">
<div class="list-language-tag tag-language-korean"><img class="icon-flag" src="/ASSETS/icon-flag-south-korea.svg" alt="">Korean</div>
</div>
</div>
<div class="menu-language-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value=".language-korean" id="language-korean">
<span class="checkmark"></span>
</label>
</div>
<div class="menu-captions-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value=".captions-korean" id="captions-korean">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="menu-content-section">
<div class="menu-tag">
<div class="list-content-section list-section-language-tags">
<div class="list-language-tag tag-language-estonian"><img class="icon-flag" src="/ASSETS/icon-flag-estonia.svg" alt="">Estonian</div>
</div>
</div>
<div class="menu-language-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value=".language-estonian" id="language-estonian">
<span class="checkmark"></span>
</label>
</div>
<div class="menu-captions-checklist filters">
<label class="checklist-container">
<input class="menu-checkbox" type="checkbox" value=".captions-estonian" id="captions-estonian">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
To see full code, please view this:
https://codepen.io/sahilsignup/pen/oNMQJbq
Ideally, even after toggling a filter via the menu (i.e., whether there is a filter active or not), the search bar/filter should work.
Kindly note that Isotope is being used for filtering.
(Sorry for the outdated jQuery — essentially no knowledge of JS/jQuery, so this was taken from Codepen. The HTML has not yet been organized.)
Thank you!
I have two fields, where there are two items to choose from, two checkboxes. And I'd like when I click the option Yes, it automatically selects Yes in the other checkbox.
For example: when I click Yes here : Guarantee or other security given by custom Single automatically selects Yes here : Guarantee or other security given by customer :
This is my jQuery code, HTML markup and source code :
<div class="row gutters">
<div class="col col-2">
<label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_single">Guarantee or other security given by custome Single</label>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryYesSingle" name="deliveryCredit" value="yes"/>
<label data-timtranslationlabel="Hyes" for="deliveryCredit_Yes" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/>
<label data-timtranslationlabel="Hno" for="deliveryCredit_No" class="checkbox">No</label>
</div>
</div>
</div>
<div class="row gutters">
<div class="col col-2">
<label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_singleBoard">Guarantee or other security given by customer</label>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="deliveryYesSingleBoard" name="deliverySingle" value="yes"/>
<label data-timtranslationlabel="Hyes" for="deliveryYesSingleBoard" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingleBoard" name="deliverySingle" value="no"/>
<label data-timtranslationlabel="Hno" for="DeliveryNoSingleBoard" class="checkbox">No</label>
</div>
</div>
</div>
jQuery
$('[id="DeliveryYesSingle"]').on('change', () => {
$('[id="deliveryYesSingleBoard"]').prop('checked', true);
});
$('[id="DeliveryNoSingle"]').on('change', () => {
$('[id="DeliveryNoSingleBoard"]').prop('checked', true);
});
JSfiddle: https://jsfiddle.net/Palucci92/pouw6q3t/1/
Make sure you imported jQuery. I have just added jQuery tag in your Jsfiddle it's just working fine
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
also i have just added some script to the process vice-versa
I have just attaching edited JSfiddle : https://jsfiddle.net/p5thmwab/
It is working.
Possible problem is that you didn't include the Jquery library in your fiddle.
Try out the snippet I made.
$('[id="DeliveryYesSingle"]').on('change', () => {
$('[id="deliveryYesSingleBoard"]').prop('checked', true);
});
$('[id="DeliveryNoSingle"]').on('change', () => {
$('[id="DeliveryNoSingleBoard"]').prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.min.js"></script>
<div class="row gutters">
<div class="col col-2"><label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_single">Guarantee or other security given by custome Single</label></div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryYesSingle" name="deliveryCredit" value="yes"/><label data-timtranslationlabel="Hyes" for="deliveryCredit_Yes" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/><label data-timtranslationlabel="Hno" for="deliveryCredit_No" class="checkbox">No</label>
</div>
</div>
</div>
<div class="row gutters">
<div class="col col-2">
<label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_singleBoard">Guarantee or other security given by customer</label></div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="deliveryYesSingleBoard" name="deliverySingle" value="yes"/>
<label data-timtranslationlabel="Hyes" for="deliveryYesSingleBoard" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingleBoard" name="deliverySingle" value="no"/>
<label data-timtranslationlabel="Hno" for="DeliveryNoSingleBoard"
class="checkbox">No</label>
</div>
</div>
</div>
</div>
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>
I've been trying to use the jquery parentsUntil method to hide a button until a radio box is selected, but I can't seem to get it to work. It's probably something obvious, but it's been bugging me for a couple of days now. Can anyone see what I'm doing wrong.
(function($) {
$(function(){
$('.last-item').change(function() {
if( $(this).val() != '' ) {
$(this).parentsUntil('.step').find('.button-next').removeClass('hide');
$(this).parentsUntil('.step').find('.button-next').addClass('show');
console.log("changing the last item");
}
});
});
})(jQuery);
.hide {
display: none;
}
.show {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="step">
<h1>Step 3 - Personal</h1>
<div class="input-wrapper radio no-feedback">
<div class="row no-gutter content-position-outer">
<div class="col-md-6 content-center-inner">
<label for="gender">What gender are you? <sup>*</sup></label>
</div>
<div class="col-md-6 content-center-inner">
<div class="row">
<div class="col-md-5 col-md-offset-2">
<label class="radio-sex" for="gender_male">
<input class="sr-only last-item" type="radio" placeholder="Male" name="gender" value="Male" id="gender_male" required="required" />
<div class="radio-img radio-img-sex-male"></div>
Male
</label>
</div>
<div class="col-md-5">
<label class="radio-sex" for="gender_female">
<input class="sr-only last-item" type="radio" placeholder="Female" name="gender" value="Female" id="gender_female" required="required" />
<div class="radio-img radio-img-sex-female"></div>
Female
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
Previous
</div>
<div class="col-md-3 col-md-push-6">
Next
</div>
</div>
</div>
JS Fiddle
.parentsUntil() gets "the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector,".
Try .closest() instead
This is likely what you meant?
No need to hide if value is empty since you cannot deselect a radio.
If you want to hide when some value is empty, use .toggle($(this).val()!="")
(function($) {
$(function() {
$('.last-item').on("click",function() { // click assumes radio as last item
$(this).closest("div.step").find('.button-next').show();
});
});
})(jQuery);
.button-next { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="step">
<h1>Step 3 - Personal</h1>
<div class="input-wrapper radio no-feedback">
<div class="row no-gutter content-position-outer">
<div class="col-md-6 content-center-inner">
<label for="gender">What gender are you? <sup>*</sup>
</label>
</div>
<div class="col-md-6 content-center-inner">
<div class="row">
<div class="col-md-5 col-md-offset-2">
<label class="radio-sex" for="gender_male">
<input class="sr-only last-item" type="radio" placeholder="Male" name="gender" value="Male" id="gender_male" required="required" />
<div class="radio-img radio-img-sex-male"></div>
Male
</label>
</div>
<div class="col-md-5">
<label class="radio-sex" for="gender_female">
<input class="sr-only last-item" type="radio" placeholder="Female" name="gender" value="Female" id="gender_female" required="required" />
<div class="radio-img radio-img-sex-female"></div>
Female
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
Previous
</div>
<div class="col-md-3 col-md-push-6">
Next
</div>
</div>
</div>
Try this snippet. I hope it will work
Note:remove hide class from -> class="button-next hide"
$(function(){
$('.button-next').hide();
$('input[type="radio"]').click(function() {
if($(this).prop('checked') == true) {
$('.button-next').show();
}
else {
$('.button-next').hide();
}
});
});
All good sensible answers, guys, but none of them worked for me. In the end I had to use
$(this).closest('.step-3').find('.button-next').css('display','block');
So I have a section to add a color and I got it to dynamically create a copy of the div with a new ID for each dynamic div.
The problem is that once the div is created, I don't know how to close it (i.e. remove it from DOM via a "close" action). I know it's because it's dynamic content. You cant bind event likes the static content, it's will not bind to the elements because they don't appear at the time you bind. I just don't know how to go about getting it to close.
The div I want to close starts with "Color" + incremented number. I hope I explained this correctly and any help would be appreciated. Thanks.
<div class="col-xs-12" style="max-width: 800px">
<div class="col-md-12">
<h3>COLOR ROTATION</h3>
<!--Begin color rotation well-->
<div id="color">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<div class="form-group"><a><span class="glyphicon glyphicon-remove-sign" aria-hidden="true" style="padding-right: 2px;"></span></a>
<label class="control-label">Color 1</label>
<input class="form-control" maxlength="100" placeholder="Enter Color" required="required" type="text" />
</div>
</div>
<div class="col-md-6">
<label class="control-label">DROPDOWNS REQUIRED?</label>
<div class="form-inline">
<div class="radio">
<label>
<input name="optradio" type="radio" />Yes</label>
</div>
<div class="radio">
<label>
<input name="optradio" type="radio" />No</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End color rotation well-->
</div>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a id="addcolor">Add Color</a>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
Here's the link to the working example:
jsfiddle
Sure, see this updated fiddle;
Essentially you want to bind an event to the document using .on(), like:
$(document).on('click', '.remove', function(e){
$(this).closest('.color-wap').remove();
});
I added the .color-wrap class to the #color div to avoid working with duplicated ID's via cloning, and added the .remove class to the remove button
1)Use the .on() to bind events on dynamically created elements
2)jquery selector ^ can help in selecting the div with id of color-number.
3).animate() to toggle height of the div or .remove if you want to completly remove the element.
$(function() {
var count = 0;
$('#addcolor').click(function() {
count++;
var clonediv = $('#color');
$(clonediv).clone().insertBefore('#color');
$(clonediv).attr("id", "color" + count);
});
$(document).on("click", ".glyphicon-remove-sign", function() {
$(this).closest("div[id^='color']").animate({"height":"toggle"});
//$(this).closest("div[id^='color']").remove();
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-xs-12" style="max-width: 800px">
<div class="col-md-12" id="test">
<h3>COLOR ROTATION</h3>
<!--Begin color rotation well-->
<div id="color">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<div class="form-group"><a><span class="glyphicon glyphicon-remove-sign" aria-hidden="true" style="padding-right: 2px;"></span></a>
<label class="control-label">Color 1</label>
<input class="form-control" maxlength="100" placeholder="Enter Color" required="required" type="text" />
</div>
</div>
<div class="col-md-6">
<label class="control-label">DROPDOWNS REQUIRED?</label>
<div class="form-inline">
<div class="radio">
<label>
<input name="optradio" type="radio" />Yes</label>
</div>
<div class="radio">
<label>
<input name="optradio" type="radio" />No</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End color rotation well-->
</div>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a id="addcolor">Add Color</a>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
</div>