Can't get Checkboxes to stop displaying a hidden Div - javascript

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');
}
});
});

Related

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");
});
});
});

Fixing toggle all behavior in checkbox element

I'm trying to toggle all checkboxes on a table and my code works but has a few issues and I don't find how to get ride of them. So here is the code:
$(function () {
$('#toggleCheckbox').on('click', function () {
var $toggle = $(this).is(':checked');
$("#codigoArancelarioBody").find("input:checkbox").click();
});
});
Take a look at this Fiddle I setup for testing and do this tests:
Mark the first checkbox (the one at table heading level) the rest of them inside #codigoArancelarioBody get checked and this is right
Mark first the checkbox at the first row (the only at table body level) and then mark the toggleAll you will see how things goes wrong since if I check the toggleAll them all should remain checked and that's the wrong part on my code
How I can fix this? Also I'll like to add a class 'removedAlert' to those TR I mark, how?
You need two click event handlers, one for the check/uncheck all box and one for the other ones
JS
$('#toggleCheckbox').on('click', function () {
var $toggle = $(this).is(':checked');
$("#codigoArancelarioBody").find("input:checkbox").prop("checked", $toggle);
});
$("#codigoArancelarioBody input:checkbox").on('click', function () {
if (!$(this).is(':checked')) {
$('#toggleCheckbox').prop("checked", false);
} else if ($("#codigoArancelarioBody input:checkbox").length == $("#codigoArancelarioBody input:checkbox:checked").length) {
$('#toggleCheckbox').prop("checked", true);
}
});
DEMO
since the same code will be applied in a lot of places on my code and
to avoid DRY, I'll like to pass the selector as a parameter in all
your code solution could you edit your post to achieve this?
$toggleCheckBox = $('#toggleCheckbox');
$checkBoxTbody = $("#codigoArancelarioBody");
$toggleCheckBox.on('click', function () {
var $toggle = $(this).is(':checked');
$checkBoxTbody.find("input:checkbox").prop("checked", $toggle);
});
$checkBoxTbody.find("input:checkbox").on('click', function () {
if (!$(this).is(':checked')) {
$toggleCheckBox.prop("checked", false);
} else if ($checkBoxTbody.find("input:checkbox").length == $checkBoxTbody.find("input:checkbox:checked").length) {
$toggleCheckBox.prop("checked", true);
}
});
DEMO
If you don't need the "click" event for something else you can do this:
$(function () {
$('#toggleCheckbox').on('change', function () {
var toggle = $(this).is(':checked');
$("#codigoArancelarioBody").find("input:checkbox").prop('checked', toggle ).closest('tr').addClass('removedAlert');
});
});
The code is actually executing what you told it to do, i.e. every time I click the checkbox on top click to other checkboxes. This way if a box is checked it will uncheck itself, because it won't mind if the top is checked or not.
What you really want is "when I check the box on top, check all the others, when I uncheck it, then uncheck all the others", which is sort of different as you see.
Try this:
$(function () {
// best practice: always store the selectors you access multiple times
var checkboxes = $("#codigoArancelarioBody").find("input:checkbox"),
toggleAll = $('#toggleCheckbox');
toggleAll.on('click', function () {
// is the top checkbox checked? return true, is it unchecked? Then return false.
var $toggle = $(this).is(':checked');
// .prop('checked', true) makes it checked, .prop('checked', false) makes it unchecked
checkboxes.prop('checked', $toggle);
});
});
see: http://jsfiddle.net/gleezer/nnfg80x1/3/

How to control check element from jquery dropdown button

I've used this jQuery dropdown button. This is my fiddle. This is the step of this:
So, the functionality:
At the time of selecting one option, a new box will appearing containing the title of that option. For example, if you click on the "Low" on the dropdown, a new box will come containing text, "Low" with a cross button.
I've written the script like this:
$('.low-option input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('#low-box').show();
} else {
$('#low-box').hide();
}
});
If you remove the boxes by clicking cross button, the box will be removed and adjacent checkbox will be unchecked.
So, I wrote this:
$('.option-box').on('click', '.cross', function() {
$(this).parent().remove();
});
if($('#low-box').is(":hidden")) {
$('.low-option input[type=checkbox]').prop('checked', false);
}
div.option-content is hidden at first. If any div.option-box will be visible, div.option-content will be visible too. If there is no div.option-box visible, div.option-content will be hidden always.
To do this, I wrote this:
var count = $('.option-content .option-box').is(":visible").length;
if (count > 0){
$('.option-content').show();
} else{
$('.option-content').hide();
}
But, my script is not working properly. As, I am not very good at jQuery, I can't find the reason and can't make it right way. Can you please help me removing the problem in the script?
Here I rewrite your code so it will become more scalable.. The important part that you missed is to relate/connect the checkbox with your option-box, so it will be easier for you to hide or show related element.. Check out this working Fiddle.
$('.dropdown-menu input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('.option-content').show();
$('.option-content #'+$(this).prop('id')).show();
} else {
$('.option-content #'+$(this).prop('id')).hide();
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
}
});
$('.option-box').on('click', '.cross', function() {
$('.dropdown-menu #'+$(this).parent().prop('id')).prop('checked', false);
$(this).parent().remove()
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
});
Cheers..

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

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();
});

jQuery checkbox click shows input field - doesn't work

I use a jQuery function to show certain hidden text fields once you select something from a select box.
This works fine for select boxes but I can't get it to work for a checkbox.
Here is the stripped code I tried (in a nutshell) but it's not working: http://jsbin.com/uwane3/2/
Thanks for your help, I rarely use JS so my knowledge is small.
I have found 2 errors in your code:
your Checkbox has no value so you cant get more than an empty result form ".val()"
you have not bind a eventhandler to the checkbox.
http://jsbin.com/uwane3/3
$('#cf3_field_9').live('click', function(e){
if (e.target == $('#cf3_field_9')[0] && e.target.checked) {
alert('The following line could only work if the checkbox have a value.');
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
You have no events registered to your checkbox.
Register a click, or change handler like this:
$('#cf3_field_9').click(function(){
if ($(this).attr("checked")) {
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
http://api.jquery.com/category/events/

Categories