Develop Reference

jQuery - if a class appears on the DOM and then wrapper is clicked remove that class again

What I am trying to do is check if a class is active with hasClass. If it is active and then the wrapper is clicked remove that class from the wrapper again.
This is what I have to remove the class:
$(function() {
$('.toggle-nav').click(function() {
// Calling a function in case you want to expand upon this.
toggleNav();
$('#site-wrapper.show-nav').click(function (){
$(this).removeClass('show-nav');
});
console.log('it worked');
});
});
But this code is removing the class as soon as it is clicked without checking "if" it is present. Even if it is not present, it removes it.
The

Have the if statement within the click function
$('#site-wrapper').click(function (){
if ($('#site-wrapper').hasClass('show-nav')) {
$('#site-wrapper').removeClass('show-nav');
}
})

Try this:
$('#site-wrapper').click(function () {
if ($(this).hasClass('show-nav')) {
$(this).removeClass('show-nav');
} else {
$(this).addClass('show-nav');
}
});
JSFiddle Demo

$('#site-wrapper.show-nav').click(function (){
$(this).removeClass('show-nav');
});

How do I change the color of my DIV when checkbox is checked?

I want to change the color of the DIV when a checkbox is checked. I want to do this in jQuery. I have tried this :
if($('#checkboxTest').is(':checked'))
{
$('.alertWrapper').css('background-color', 'blue');
}
But it is not working.. any help?

You need to use .change() event to keep track of the state of your checkbox:
$('#checkboxTest').change(function() {
if($(this).is(':checked'))
{
$('.alertWrapper').css('background-color', 'blue');
} else {
// Your code here will fired when the checkbox is unchecked
}
}).change(); // <-- Trigger the change event on page load

You need to use change event :
$('#checkboxTest').change(function() {
var c = this.checked ? 'blue' : 'transparent';
$('.alertWrapper').css('background-color', c);
});
Working demo

You can use the following (with click event):
$('#checkboxTest').click (function ()
{
var thisCheck = $(this);
if (thischeck.is (':checked'))
{
// your stuff
}
});

how to apply function to each checkbox on page?

I am trying to apply a function to every checkbox on a page that shows/hides <div class="selectlist"> depending on if the checkbox is checked, this function makes all the <div class="selectlist"> on the page toggle
$("input[type=checkbox]").live('change', function() {
if ($(this).is(':checked') == false) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
});
I tried the jquery each function like this but that doesnt seem to work
$.each($("input[type=checkbox]").live('change', function() {
if ($(this).is(':checked') == false) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
}));
I know its possible to this by using a class instead of input[type=checkbox] but I want to avoid doing that
How can I make jquery change the behavior of the checkbox the user clicks?

If you're trying to bind an event handler to all elements verifying input[type=checkbox], simply do
$(document).on('change', "input[type=checkbox]", function() {
if (!this.checked) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
});
No need to use each there : most jQuery functions work if the jQuery set contains more than one element.
Note that I use on there instead of live : after having been deprecated for a long time, live has been removed from recent versions of jQuery.
EDIT : discussion in comments below lead to this code :
$(document).on('change', "input[type=checkbox]", function() {
$(this).next().toggle(this.checked);
});

$(document).on('change', 'input[type=checkbox]', function() {
$('#selectlist').toggle(this.checked);
});
ID's are uniqe, and there is no "all the <div id="selectlist"> on the page toggle", there can be only one? Use a class instead, and show us what the markup looks like !

Javascript code does not work

I have a panel activated/deactivated with a checkbox (chk1)'On/Off'. This panel contains a checkbox (chk2) and a radio button (rbtn).
When the radio button (rbtn) is checked the checkbox must be disabled.
When the panel is disabled by unchecking the 'On/Off' checkbox, the radio button and the checkbox (chk2) are disabled.
The problem is that when I open the page with panel enabled, the code from javascript is executed, but when I open the page with panel disabled, after I enabled the panel the javascript doe not work when I check the radio button so that the chk2 became disabled.
$(document).ready(function (){
$('input[id^=rbtn]').click(function () {
SetControlEnableState($('#chk2'), $('#rbtn'));
});
function SetControlEnableState(controlToSet, control) {
if (control.is(':checked')) {
$(controlToSet).attr('disabled', 'disabled');
alert('if');
}
else {
$(controlToSet).removeAttr('disabled');
alert('else');
}
}
});
When the panel is updated the javascript code is not available anymore.

Don't use the click event on checkboxes but the change one :
$('input[id^=rbtn]').change(function () {
This way you'll get the new state. The click event is generated before the checkbox is changed.

Instead of this:
$(controlToSet).attr('disabled', 'disabled');
$(controlToSet).removeAttr('disabled');
Do this:
$(controlToSet).prop('disabled', true);
$(controlToSet).prop('disabled', false);

$(document).ready(function (){
$('input[id^=rbtn]').change(function () {
SetControlEnableState();
});
function SetControlEnableState() {
if ($('#rbtn').is(':checked')) {
$('#chk2').attr('disabled', 'disabled');
alert('if');
}
else {
$('#chk2').removeAttr('disabled');
alert('else');
}
}

Simplify the whole thing:
$(document).ready(function () {
$('input[id^=rbtn]').change(function () {
SetControlEnableState($('#chk2'), $('#rbtn'));
});
function SetControlEnableState(controlToSet, control) {
controlToSet.prop('disabled', control.is(':checked'));
}
});

try this
$(document).ready(function (){
$('input[id^=rbtn]').click(function () {
SetControlEnableState($('#chk2'), $(this));
});
function SetControlEnableState(controlToSet, control) {
if (control.is(':checked')) {
$(controlToSet).attr('disabled', 'disabled');
} else {
$(controlToSet).removeAttr('disabled');
}
}
});

jQuery if checkbox is selected do this

I have two div elements that are hidden on $(document).ready(function(){} and they are supposed to appear if their specific check box is checked, and disappear if it was checked and then unchecked. I can show the element when the checkbox is selected very easily using show() or slideDown() but when i use the if else statements it returns as false everytime and the forms stay hidden...
$(document).ready(function(){
if($("#upload_yes").is(':checked')) {
$("#upload_form").show();
} else {
$("#upload_form").hide();
}
if($("#new_info_yes").is(':checked')) {
$("#new_info_form").slideDown(500);
} else {
$("#new_info_form").hide();
}
});

You aren't binding this code to the proper event:
$(document).ready(function() {
$("#upload_yes").on('change', function() {
if ($(this).is(':checked')) {
$("#upload_form").show();
$("#new_info_form").slideDown(500);
} else {
$("#upload_form, #new_info_form").hide();
}
});
});

See this fiddle
You must do the job in the change event.
then calling .trigger('change') on the check boxes make the div show/hide on the initial page load.
The code :
$(document).ready(function(){
$('input#upload_yes').change(function(){
if($(this).is(':checked')) {
$("#upload_form").show();
} else {
$("#upload_form").hide();
}
});
$('input#new_info_yes').change(function(){
if($(this).is(':checked')) {
$("#new_info_form").slideDown(500);
} else {
$("#new_info_form").hide();
}
});
//Trigger the change event so the divs are initially shown or hidden.
$('input[type=checkbox]').trigger('change');
});

To evaluate if something has changed you need to do your code inside an event! (in this case: change) because what you are doing is to get the value of is(':checked') just at $(document).ready and it will always return false because at first moment your element wasn't checked.
Well, this is the correct way :-)
(I tried to reduce code)
Live Demo:
http://jsfiddle.net/oscarj24/RSDRg/
Code:
$(document).ready(function() {
$('#upload_yes').on('change', function() {
var done = $(this).is(':checked');
if(done) {
$('#upload_form').show();
$('#new_info_form').slideDown(500);
} else {
var frm = $('#upload_form').add('#new_info_form');
frm.hide();
}
});
});