I am trying to remove text fields with checkboxes as shown in the jsFiddle. However, as you can see, one of the boxes is checked but its corresponding text field exists. Can someone help me edit this to get this to hide the corresponding text fields for already checked items on load?
Thanks!
http://jsfiddle.net/masedesign/jdbmK/1/
BOOYAH http://jsfiddle.net/jdbmK/4/
Try this: http://jsfiddle.net/FloydPink/NqKP9/
$(document).ready(function() {
$('.check').each(function() {
$(this).prev().toggle(!$(this).is(':checked'));
});
$('.check').click(function() {
$(this).prev().toggle();
});
});
Here ya go. Since you already hit the dom for all .check, you can just filter that result into ones that are currently :checked status, and hide the previous element.
$(document).ready(function() {
$('.check').click(function() {
$(this).prev().toggle();
}).filter(':checked').each(function(){
$(this).prev().hide();
});
});
http://jsfiddle.net/robert/F2vkq/
You're checking the box with the checked attribute, but you have no code that looks for checkboxes that have been set this way.
$('.check').each(function() {
if ($(this).is(':checked'))
$(this).prev('.date').toggle();
});
Here's the updated fiddle
http://jsfiddle.net/jdbmK/5/
$(document).ready(function() {
$('.check').click(function() {
$(this).prev().toggle();
});
// toggle already checked boxes
$(':checked').each(function() {
$(this).prev().toggle();
})
});
Optimized version: http://jsfiddle.net/jdbmK/6/
$(document).ready(function() {
function toggle() {
$(this).prev().toggle();
}
$('.check').click(toggle);
// toggle already checked boxes
$(':checked').each(toggle);
});
Related
I'm using Jquery's toggle event to do some stuff when a user clicks a checkbox, like this:
$('input#myId').toggle(
function(){
//do stuff
},
function(){
//do other stuff
}
);
The problem is that the checkbox isn't being ticked when I click on the checkbox. (All the stuff I've put into the toggle event is working properly.)
I've tried the following:
$('input#myId').attr('checked', 'checked');
and
$(this).attr('checked', 'checked');
and even simply
return true;
But nothing is working. Can anyone tell me where I'm going wrong?
Edit - thanks to all who replied. Dreas' answer very nearly worked for me, except for the part that checked the attribute. This works perfectly (although it's a bit hacky)
$('input#myInput').change(function ()
{
if(!$(this).hasClass("checked"))
{
//do stuff if the checkbox isn't checked
$(this).addClass("checked");
return;
}
//do stuff if the checkbox isn't checked
$(this).removeClass('checked');
});
Thanks again to all who replied.
Use the change event instead of the toggle event, like such:
$('input#myId').change(function () {
if ($(this).attr("checked")) {
//do the stuff that you would do when 'checked'
return;
}
//Here do the stuff you want to do when 'unchecked'
});
While using the change event handler suggested by Dreas Grech is appropriate, it doesn't work well in IE 6 & 7, which doesn't fire the change event until the focus is blurred (that is, until you click outside the area of the checkbox). As QuirksMode say, "it's a serious bug".
You might want to use the click event handler, but that won't work with keyboard navigation. You need to register a keyup handler too...
See also this related question.
I haven't yet found a good cross-browser solution that supports both mouse clicks and keyboard activation of the checkboxes (and doesn't fire too many events).
Regarding your solution for checking whether the checkbox is checked or not, instead of adding your own checked class, you may use HTML's checked attribute:
$('input#myInput').change(function () {
if ($(this).attr("checked")) {
//do stuff if the checkbox is checked
} else {
//do stuff if the checkbox isn't checked
}
});
Any browser sets the checked attribute of an input element to the value "checked" if the checkbox is checked, and sets it to null (or deletes the attribute) if the checkbox is not checked.
why not using $.is() ?
$('input#myId').change(
function() {
if ($(this).is(':checked')) {
// do stuff here
} else {
// do other stuff here
}
});
This is an answer by MorningZ (I found it here) that makes totally sense:
The part you are missing is that "checkbox" is a jQuery object, not a
checkbox DOM object
so:
checkbox.checked sure would error because there is no .checked property of a jQuery
object
so:
checkbox[0].checked would work since the first item on a jQuery array is the DOM object
itself.
So in your change() function you can use
$(this)[0].checked
$('input#myId').toggle(
function(e){
e.preventDefault();
//do stuff
$(this).attr('checked', 'true');
},
function(e){
e.preventDefault();
//do other stuff
$(this).attr('checked', 'false');
}
);
this worked for me............ check it
$(":checkbox").click(function(){
if($(this).attr("id").split("chk_all")[1])
{
var ty = "sel"+$(this).attr("id").split("chk_all")[1]+"[]";
if($(this).attr("checked"))
{
$('input[name="'+ty+'"]').attr("checked", "checked");
}
else
{
$('input[name="'+ty+'"]').removeAttr("checked");
}
}
})
I did a similar approach but simply using the checked attribute such as
//toggles checkbox on/off
$("input:checkbox").change(
function(){
if(!this.checked){
this.checked=true;
}
else{
this.checked=false;
}
}
);
//end toggle
$("input[type=checkbox][checked=false]")// be shure to set to false on ready
$("input#Checkbox1").change(function() {
if ($(this).attr("checked")) {
$("#chk1").html("you just selected me")//the lable
} else {$("#chk1").html("you just un selected me") }
});
Try using a non-jquery function:
function chkboxToggle() {
if ($('input#chkbox').attr('checked'))
// do something
else
// do something else
}
then in your form:
<input id="chkbox" type="checkbox" onclick="chkboxToggle()" />
Try:
$(":checkbox").click(function(){
if($(this).attr("checked"))
{
$('input[name="name[]"]').attr("checked", "checked");
}
else
{
$('input[name="name[]"]').removeAttr("checked");
}
})
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 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 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/