Showing div based on checkbox value with Javascript and style display attribute - javascript

I have created a web form with ASP.NET MVC.
I have successfully setup my View to add the checkbox which shows a div based on its value on click. This is the functioning Javascript:
$('div.schedule .input_control').click(function () {
var $target = $(this).closest('div').find('.showSchedule');
if (this.checked) {
$target.show();
} else {
if (confirm("Are you sure you want to exclude this schedule?") == true) {
$target.hide();
$(':hidden').not("input[name=__RequestVerificationToken]").val('');
} else {
$(this).prop("checked", true);
}
}
});
Here is the HTML snippet that has checkbox and div to be hidden and shown:
<div class="schedule">
#Html.CheckBox("schedule", false, new { #class = "input_control" })
<div style="display: none" class="showSchedule">
//form fields
</div>
</div>
The div is shown and hidden successfully when the checkbox is ticked and unticked by clicking on it. The confirm message works as expected too.
But when there is a validation error and form page loads again the div is hidden while the checkbox ticked!
How can I ensure that the div is shown always based on the value of checkbox? This is important as when the item is edited the form loads with the checkbox ticked but the div hidden.
I realize this would be because by default, my div style is set to "display: none".
So what is a better way for this?

Add a function to check the checkbox is checked or not on document ready, if it's checked then show the div, otherwise hide the div
$(document).ready(function () {
var $input = $('div.schedule .input_control:checked');
var $target = $input.closest('div').find('.showSchedule');
$target.show();
});

Related

Checkbox checked only one from the grouup on click over div

I need to check checkbox on click over the div where checkbox resides inside that div. Now I need to check only one checkbox from the category.
My code is working fine but its only work with checkbox change event not on div click.
<script>
$(':checkbox').on('change',
function () {
var th = $(this), id = th.prop('id');
if (th.is(':checked')) {
$(':checkbox[id="' + id + '"]').not($(this)).prop('checked', false);
//console.log("a")
}
});

select value to show another hidden dropdown box

I got this code for a website I am working on, but it does not work:
$(document).on('change', 'select[name="Discount"]', function() {
var $select = $(this);
var $partnerBlock = $select.closest('.col-md-2').siblings('.partner');
if ($select.val() === 'Yes') {
$partnerBlock.addClass('show');
} else {
$partnerBlock.removeClass('show');
}
});
What I want is hide the Partner dropdown by default, hiding it from everyone, and show it only when user set Discount to "Yes".
Hide it by default and then use an event listener on the change event for the dropdown.
https://jsfiddle.net/mco1sxcb/
You should use ids for your elements, easier to manipulate them.

Hide element on checkbox click/check, re-insert element on checkbox uncheck

Im learning Jquery so please bear with me here I would like to hide / remove a DIVs content if a checkbox is check>
When checkbox is unchecked I would like the DIVs content to re-appear,(which was hidden on checkbox checked.)
I have managed to solve part 1 of the problem, hiding the content but Im stuck on getting content re-appear.
YOU CAN VIEW MY JSFIDDLE HERE
Any help appreciated
$(function() {
$('.return_to_pickup_location').click(function() { //fire when the button is clicked
$('form input:checkbox').each(function() {
var checkbox = $(this);
if(checkbox.is(':checked'))
$('.returnLocation').hide("slow");
else
$('.returnLocation').show("slow");
});
});
});
Just add show to the element in else block.
If you have single checkbox no need to have for each loop
Updated fiddle
$(function() {
$('#return_to_pickup_location').click(function() { //fire when the button is clicked
if($(this).is(':checked'))
$('.returnLocation').hide("slow");
else
$('.returnLocation').show("slow");
});
});
you have done coding on only if condition try to add else condition also to get your required result like below code
$(function() {
$('.return_to_pickup_location').click(function() { //fire when the button is clicked
$('form input:checkbox').each(function() {
var checkbox = $(this);
if(checkbox.is(':checked')) $('.returnLocation').hide("slow");
else
$('.returnLocation').show("slow");
});
});
});

How do I trigger a custom javascript event when a checkbox is selected via a jQuery script that selects all checkboxes on a page?

I'm currently working on a photography store website. Customers will be allowed to view photosets ranging from 100-500 images on a page. I want those customers to be able to click a "Select All" button (or other element) that checks all the checkboxes on the page. I am currently using jQuery to successfully accomplish this "Select All" feature after researching here on Stack Overflow.
Currently, the code that I am working with puts a checkbox on each image in the photoset. If the user clicks the checkbox, it triggers a custom event. However, I want the checkbox state of being checked (or the change from being unchecked to checked) to trigger the event, not the click. If the click triggers the event, the Select All feature I have using jQuery fails to work, since jQuery isn't "clicking" each of the checkboxes on the page, only changing the checkbox to selected. This means that the custom event doesn't load.
The code that currently works to trigger the event I need by clicking (which I do not want to do) the checkbox is:
$('.select-product').on('click', this.QuickOrder.loadProduct);
The code I am trying to develop isn't working, but it goes something like:
$('.select-product').change(function(){
var isChecked = $(this).is(':checked');
if(isChecked) {
this.QuickOrder.loadProduct;
}
});
I've used the .change() function after researching and finding that the change function registers the change in the condition of the checkbox. When this condition changes to true, I want QuickOrder.loadProduct to trigger. After that, everything should work.
Here is my jQuery "Select All" script for reference:
$(document).ready(function() {
$("#select_all").change(function(){
if(this.checked){
$(".select-product").each(function(){
this.checked=true;
})
}else{
$(".select-product").each(function(){
this.checked=false;
})
}
});
$(".select-product").click(function () {
if (!$(this).is(":checked")){
$("#select_all").prop("checked", false);
}else{
var flag = 0;
$(".select-product").each(function(){
if(!this.checked)
flag=1;
})
if(flag == 0){ $("#select_all").prop("checked", true);}
}
});
});
Any ideas on how to make this happen? Thank you!
As explained in Why isn't my checkbox change event triggered?:
The change event does not fire when you programmatically change the value of a check box.
Below I give two solutions (the first is from the aforementioned link):
1: Explicitly trigger the change event after changing the checkbox setting.
this.checked = true;
$(this).trigger('change');
2: Just programmatically delegate to the click event.
$(this).trigger('click');
Demo:
window.loadProduct = function(id) { alert('loadProduct() called on #'+id+'.'); };
// propagate select-all checkbox changes to all individual checkboxes
$("#select_all").change(function() {
if (this.checked) {
$(".select-product").each(function() {
// original code
//this.checked = true;
// solution #1: explicitly force a change event
this.checked = true;
$(this).trigger('change');
// solution #2: trigger click
//$(this).trigger('click');
});
} else {
$(".select-product").each(function() {
this.checked = false;
});
} // end if
});
// propagate individual checkbox changes back to the select-all checkbox
$(".select-product").click(function() {
if (!$(this).is(":checked")) {
$("#select_all").prop("checked", false );
} else {
var flag = 0;
$(".select-product").each(function() {
if (!this.checked)
flag = 1;
});
if (flag == 0) {
$("#select_all").prop("checked", true );
} // end if
} // end if
});
// call loadProduct() for any change of an individual checkbox
$('.select-product').change(function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
loadProduct(this.id);
} // end if
});
.select_container {
margin-bottom:8px;
}
.img_container {
display:flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select_container">
<input id="select_all" type="checkbox"/>
</div>
<div class="img_container">
<div>
<div><img src="https://www.gravatar.com/avatar/4fa45261dec56004145c653832504920?s=128&d=identicon&r=PG&f=1"/></div>
<input id="check1" class="select-product" type="checkbox"/>
</div>
<div>
<div><img src="https://www.gravatar.com/avatar/fc03f6eed7d4d5e3233c5dde9f48480d?s=128&d=identicon&r=PG&f=1"/></div>
<input id="check2" class="select-product" type="checkbox"/>
</div>
<div>
<div><img src="https://www.gravatar.com/avatar/fd882c2b5e410936a4a607b2e87465d9?s=128&d=identicon&r=PG&f=1"/></div>
<input id="check3" class="select-product" type="checkbox"/>
</div>
</div>

Can't get Checkboxes to stop displaying a hidden Div

I have inserted some javascript to get two checkboxes in particular to display a hidden Div when they are checked and to make that Div disappear when they are unchecked. The issue I am having is that all of the other checkboxes are making the Div appear when they are checked. Now they do not fade in or fade out like the original two checkboxes are supposed to do. Instead they other checkboxes just make the hidden Div appear only. How do I prevent the other checkboxes from influencing the Div.
the page is http://asilverwareaffair.net/_NEW/request-a-quote/
the correct checkboxes are:
Wedding Reception (Ceremony is off site)
Wedding Reception (Ceremony on site)
they are located under "Type of Event" in the "Event Details" section
the Div: id="weddingselect" class="hide" is hidden but appear when any checkbox is checked. However it properly fades in and out when the correct checkboxes above are checked and unchecked. What would cause all the other checkboxes on the page to make the "weddingselect" Div become visable and how do I stop them?
Here is the JavaScript I used to make the div fade in and out with the Wedding Reception checkboxes:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#wedchk1').change(function () {
if (this.checked)
// ^
$('#weddingselect').fadeIn('slow');
else
$('#weddingselect').fadeOut('slow');
});
$('#wedchk2').change(function () {
if (this.checked)
// ^
$('#weddingselect').fadeIn('slow');
else
$('#weddingselect').fadeOut('slow');
});
});
</script>
HOWEVER: I don't think my javascript has anything to do with it because if I remove all javascript the checkboxes on the page still make the Hidden div appear when they are checked... it doesn't make sense to me.
You have the following code in your custom.js:
$('input[type="checkbox"]').change(function () {
if (this.checked) {
var chkVal = (this.value);
if(chkVal="Wedding Reception"){
$('#weddingselect').show();
//$('#weddingselect').css()
}else{
$('#weddingselect').hide();
}
}
//$('#weddingselect').hide();
});
That's why it's "working" even if you remove the mentioned script.
use $(this) not this.
thisis for native Javascript, $(this) is for jQuery.
Also use $(this).is(':checked') instead of $(this).checked..
And lastly, use {} for if else statements.
$(document).ready(function () {
$('#wedchk1').change(function () {
if ($(this).is(':checked')) {
$('#weddingselect').fadeIn('slow');
}
else {
$('#weddingselect').fadeOut('slow');
}
});
$('#wedchk2').change(function () {
if ($(this).is(':checked')) {
$('#weddingselect').fadeIn('slow');
}
else {
$('#weddingselect').fadeOut('slow');
}
});
});

Categories