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');
}
});
Related
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");
});
});
});
I call a function in jquery for a checkbox toggle change. It works as expected.
Now I want to change this when the box is checked show some tables else hide.
But I don't know how to modify my function.. [1]
How can I modify this ?
[1]
HTML
<label class="checkbox"> <input type="checkbox" id="toggleSequence" name="sequence_check" id="sequence_check">
Jquery
$("#toggleSequence").change(function(e){
if($(this).is(":checked")){
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
});
JS Fiddle
$('#toggleSequence').parents('table').next().hide(); // first you need to hide it use can also use css for this
$("#toggleSequence").change(function (e) {
if ($(this).is(":checked")) {
alert();
$(this).parents('table').next().show();
} else {
$(this).parents('table').next().hide();
}
});
So first off I did search and I found this Enable/Disable a dropdownbox in jquery which got me on the right track. I'm new to jquery so when seeing other code I can adapt it to fit and work for me.
So what i'm asking is how do you make it check to see if two check boxes condition are true?
<script>
$(document).ready(function() {
$("#box1").click(function() {
if ($(this).is(":checked")) {
$("#tech1").prop("disabled", false);
} else {
$("#tech1").prop("disabled", true);
}
});
});
</script>
I want it to be if box1 and box2 are checked enable this box? I understand you can do it with an if statement, but I'm not sure where exactly it goes. Thanks in advance.
Would this work:
$("#box1").click(function() {
if ($(this).is(":checked")) &&
$("#box2").click(function() {
if ($(this).is(":checked"))
I doesn't work and I assume thats because that above creates two functions and not the if statement that I need.
Include both in the event handler, and check if both are checked
$(document).ready(function() {
var boxes = $("#box1, #box2");
boxes.on('change', function() {
var disabled = boxes.filter(':checked').length === boxes.length;
$("#tech1").prop("disabled", disabled);
});
});
FIDDLE
Consider box1 & box2 checkboxes defined with a css class boxes as below:
<input type="checkbox" id="box1" class="boxes" />
<input type="checkbox" id="box2" class="boxes" />
Now you can use box class as jquery selector to do your task
<script>
$(document).ready(function() {
$(".boxes").click(function(){
if($(".boxes:checked").size() == $(".boxes").size()){
$("#tech1").prop("disabled", false);
}else{
$("#tech1").prop("disabled", true);
}
);
});
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 have some jQuery checkbox buttons, and they work fine. However, I would like to change their text upon a click. for example: the button's text is "click me". when the user clicks it, i needs to change to "thanks for clicking", for example.
This is what I am trying using:
<script>
$(function() {
$("#button").button();
$("#button").click(function(){
if($("#label").is(':checked')) {
$("#label span").text("Hide");
}
else {
$("#label span").text("Show");
}
});
});
</script>
<input id='button' type='checkbox' />
<label id='label' for="button">Show/Hide</label>
This is your first problem:
if($("#label").is(':checked')) {
<label> elements don't get "checked" only their checkboxes do. Change it to:
if (this.checked) {
In the code above, this refers to the checkbox element that has been clicked, and we're looking to see if the checked property contains the value true. It's much more efficient that .is(':checked').
Also, the <label> element has no <span> child, it just has text, so
$("#label span").text("Hide");
should be
$("#label").text("Hide");
But you could shorten the whole thing using the ternary conditional operator:
$("#button").click(function(){
$("#label").text(this.checked ? "Hide" : "Show");
}
Working demo: http://jsfiddle.net/AndyE/qnrVp/
$("#button").click(function() {
if($(this).is(':checked')) {
$("#label").text("Hide");
} else {
$("#label").text("Show");
}
});
And here's a live demo.
Try this:
$("#button").click(function(){
var th = $(this);
if(th.is(':checked')) {
$("label[for=" + th.attr('id') + "]").text("Hide");
} else {
$("label[for=" + th.attr('id') + "]").text("Show");
}
});