Develop Reference

jQuery click() on checkbox is not checking checkbox before running click handler

I was calling jQuery.click() on all my checkboxes when a global checkbox is checked. I want to disable a button if none of the normal checkboxes are checked. Hence, I was counting number of checked checkboxes using the code below. But when we manually click on .chkLst happens $(this) comes already checked and when I call click() function, $(this) comes unchecked.
$(".grid").on("click", ".chkLst", function() {
if($(this).is(":checked")){
deleteBtnDisableCheck++;
} else {
deleteBtnDisableCheck--;
}
if (deleteBtnDisableCheck == 0) {
$('#btnDeleteLst').addClass("btnDisable");
} else {
$('#btnDeleteLst').removeClass("btnDisable");
}
});
$(".grid").on("click", ".chkLstAll", function() {
$(".chkLst").each(function() {
$(this).click();
});
});

You can do the above operation easily using selector, so you dont require a counter variable.
//function to call when local checkbox is clicked
$(".grid").on("click", ".chkLst", function() {
callUpdateClassFunction();
});
//function to call when global checkbox is clicked
$(".grid").on("click", ".chkLstAll", function() {
$(".chkLst").prop('checked',this.checked);
callUpdateClassFunction();
});
//function to update class
function callUpdateClassFunction(){
if($(".chkLst:checked").length > 0){
$('#btnDeleteLst').addClass("btnDisable");
}
else{
$('#btnDeleteLst').removeClass("btnDisable");
}
}

Jquery if checked toggle class

I have a box with a checkbox, I want to insert in jQuery if the checkbox is checked toggle the class on the box with a transition, but it fails and below is the code:
$(document).ready(function(){
if ($('.onoffcheck').is(':checked')) {
$(".panel-success").toggleClass("panel-off2");
} else {
$(".panel-off").toggleClass("panel-success");
}
});
JSFIDDLE

Try
$(document).ready(function () {
$('.onoffcheck').change(function () {
$("#node2").toggleClass("panel-off2", this.checked).toggleClass("panel-success", !this.checked);
}).change()
});
Demo: Fiddle

First make sure to include the jQuery library.
Then you have to listen to the checkbox change event. Otherwise the conditional check gets only executed on document ready.
E.g.:
$(document).ready(function(){
$('.onoffcheck').on('change', function(){
if ($(this).is(':checked')) {
$(".panel-success").toggleClass("panel-off2");
} else {
$(".panel-off").toggleClass("panel-success");
}
});
});
DEMO

You have to add a change listener to make the toggle logic execute on every checked change. See working example
var toggle = function () {
if ($('.onoffcheck').is(':checked')) {
$(".panel-success").toggleClass("panel-off2");
} else {
$(".panel-off").toggleClass("panel-success");
}
};
$(document).ready(function () {
toggle(); // initial execution
$('.onoffcheck').on('change', toggle); // execute it on every change
});

If one checkbox is checked, end function

I have a div with the id "PCsetup" set to slide open when any of three check-boxes (#PCOF, #PCTMI, or #PCRM) are checked, but if one or two of the three is already checked, and the user checks another check-box, I want to end the function before it slides open, as it would actually close the "PCsetup" div. How can I have the function check if the other two check-boxes are checked, and if they aren't, have the div slide down? Here's what I have so far:
$(function() {
$("input[type=checkbox]").on('click', function(){
if ($("#PCOF").is(':checked'))|| ($("#PCRM").is(':checked')) {
return;
} else if $('#PCTMI').is(':checked')){
$("#PCsetup").slideDown("slow");
} else {
$("#PCsetup").slideUp("slow");
}
});

A couple things: 1. The anonymous function in your example isn't closed, so the code isn't valid. 2. I had a hard time following exactly what you're trying to accomplish, but it sounds like you want to show the div if any combination of checkboxes are checked and hide it if none are checked. This will get you that result:
$(document).ready(function() {
$(function() {
$('#PCOF, #PCTMI, #PCRM').on('click', function() {
var numChecked = $('#PCOF:checked, #PCTMI:checked, #PCRM:checked').length;
if (!numChecked) {
$('#PCsetup:visible').slideUp('slow');
} else {
$('#PCsetup').slideDown('slow');
}
});
});
});
http://jsbin.com/IsutuhI/3

something like
$(function() {
var $chks = $('#PCOF, #PCRM, #PCTMI');
$chks.on('click', function(){
var checked = $chks.filter(':checked').length > 0, visible = $("#PCsetup").is(':visible');
console.log('dd', checked, visible)
if (checked && !visible) {
$("#PCsetup").finish().slideDown("slow");
} else if(!checked && visible){
$("#PCsetup").finish().slideUp("slow");
}
});
});
Demo: Fiddle

Removing and Appending in the DOM

I've been at this problem for a while now, and I can't seem to figure it out. I have a checkbox that when checked, deletes a div containing a textbox. When that checkbox is unchecked the aforementioned textbox should return to the page. The removal works, but the append doesn't.
This is what I'm currently working with code wise:
$('#ResultsNoData1').click(function () {
var parent = document.getElementById('Results1').parentNode;
var child = document.getElementById('Results1');
if (this.checked) {
parent.removeChild(child);
}
else {
parent.appendChild(child);
}
});
My original design worked by doing the following:
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide() : $('.results1').show();
});
However the functionality I need to recreate is actually removing the data from this textbox from being accessed on the site while hiding the textbox itself at the same time. This doesn't provide that functionality.
Current example

Here you go: http://jsfiddle.net/cx96g/5/
Your issue is that you were trying to set parent inside your click, but once child is removed it would fail.
var parent = document.getElementById('Results1').parentNode;
var child = document.getElementById('Results1');
$('#ResultsNoData1').click(function () {
if (this.checked) {
node = parent.removeChild(child);
}
else {
parent.appendChild(child);
}
});

You need to show and hide that TextBox not remove.
$('#ResultsNoData1').click(function () {
if (this.checked) {
$("#Results1").hide();
}
else {
$("#Results1").show();
}
});
Working example

$('#ResultsNoData1').click(function () {
(this.checked) ? $('#Results1').val('').parent().hide() : $('#Results1').parent().show();
(this.checked) ? $('.results1casual').hide() : $('.results1casual').show();
});
JSFiddle

You are doing it right way but missing one small thing need to remove value from the textbox.
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide() : $('.results1').show().val("");
});
or
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide().val("") : $('.results1').show();
});
And this is the right way(show/hide) the textarea.

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 !