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");
});
});
});
Related
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..
I have this jQuery code:
$(document).ready(function(){
$('.checkdisplay').change(function(){
if(this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
This works great only if I check the .checkdisplay radio button: the div appears, but after, if i uncheck .checkdisplay radio button, the div .todisplay doesn't disappear.
Where i'm wrong? :(
EDIT:
demo: http://jsfiddle.net/Mse2L/
You need to test all the radios and only show on the one with the correct class
You could have used ID too
Notice I use .on("click" since change needs a blur in some browsers
Live Demo
$(function(){
$("input[name='roomdoor']").on("click",function(){
if ($(this).hasClass("checkdisplay") && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
$(document).ready(function () {
$('.radio').change(function () {
if ($(this).hasClass('checkdisplay') && this.checked) $('.todisplay').fadeIn('slow');
else $('.todisplay').fadeOut('slow');
});
});
Demo
The problem is, you can't uncheck a radiobutton.
Problem is your radio button, you should use checkbox like,
Once a radio button having class checkdisplay is checked then it will be checked, how it can be unchecked
<input type='checkbox' class='checkdisplay' />
<div class='todisplay'>test</div>
Demo
Updated, try this like,
$(document).ready(function(){
$('.radio').change(function(){// add onchange on radio class
// check the radio has checkdisplay class or not
if($(this).hasClass('checkdisplay') && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
Working demo
$('.checkdisplay').click(function() {
if( $(this).is(':checked')) {
$(".todisplay").fadeIn('slow');
} else {
$(".todisplay").fadeOut('slow');
}
});
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');
}
});
});
I am trying to hide a paragraph when a check box is unchecked right now I can only display when it is checked.
here is my jquery:
$('.pharmacy').click(function(){
$('.pcsoc').show();
});
What can I do to hide the paragraph when it is unchecked?
Bind to the change event instead:
$('.pharmacy').change(function(e){
$('.pcsoc').toggle();
});
Or you can check if .is(':checked') and make your own hide/show (more bullet-proof).
$('.pharmacy').change(function(e){
if ($(this).is(':checked'))
$('.pcsoc').show();
else
$('.pcsoc').hide();
});
Try:
$('.pharmacy').click(function(){
$('.pcsoc').toggle();
});
You need to test if it is checked or unchecked:
$('.pharmacy').click(function(){
if ($(this).is(':checked')) {
$('.pcsoc').show();
}
else $('.pcsoc').hide();
});
EDIT It's probably better to bind to the change() method as suggested by Brad Christie.
You can check if the checkbox is checked and respond appropriately:
$('.pharmacy').click(function() {
if(this.checked)
$('.pcsoc').show();
else
$('.pcsoc').hide();
});
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/