Develop Reference

Jquery Code to show link while checkbox is checked on initial page load

I have a following piece of code which works fine, when i check or uncheck the checkbox, but when i initially loads my page and some of my checkboxes are already checked, i want to show the div box to be visible but the code is not doing so, am i missing anything
please guide through the following code
Thanks
$(document).ready(function() {
//check the state of the checkox
$(".showinvoice").is(':checked') {
var stats = $(this).attr('data-id');
$("#"+stats).css('display','block');
}
//check the code only when the click button is triggered
$(".showinvoice").click(function(e) {
var getStudent = $(this).attr('data-id');
if ($(this).is(':checked')) {
$("#"+getStudent).css('display','block');
} else {
$("#"+getStudent).css('display','none');
}
});
});

Firstly you're missing the if statement around the .showinvoice state condition.
Secondly you should use the data() method to access data-* attributes. You should also use the change method when dealing with radio and checkbox inputs so that the events are still raised by users who navigate using the keyboard. Lastly you can remove the if statement and just use toggle() instead.
To achieve what you require all you need to do is raise a change event on the checkboxes on load of the page. Try this;
// check the state of the checkox
if ($(".showinvoice").is(':checked')) {
var stats = $(this).data('id');
$("#" + stats).show();
}
// check the code only when the click button is triggered
$(".showinvoice").change(function(e) {
var getStudent = $(this).data('id');
$("#" + getStudent).toggle(this.checked);
}).change(); // < to run this code when the page loads

Try changing your first part to...
//check the state of the checkox
$(".showinvoice:checked").each(function() {
var stats = $(this).data('id');
$("#"+stats).css('display','block');
});

adding removing classes for checkbox and drop down

I am adding and removing class to the elements on change event. The below code is working for dropdown and radio buttons, but is not working for checkbox and dropdown. The disable class gets applied, but on unchecking it is not getting enabled..
$(function() {
$switchers.each(function(index, elem) {
$(elem).prop("disabled", false).removeClass("c_disabled")
.closest(".wrapper")
.find(".overlay").remove();
if ($(elem).prop('tagName') == 'SELECT') {
$(elem).children().removeClass('dis').removeAttr('disabled');
}
});
How can I make it work for checkbox's check, uncheck.
For example, If you see my fiddle when you check C3, dropdown option Two gets disabled, but when you uncheck it, it doesn't get enabled again, It gets enable while you uncheck other checked checkbox.
What is the reason for this? When I have a combination of radio and dropdown it works for that.
I want it to enable it once I uncheck C3
It has anything to do with the point of checkbox being multiselect?
I am able to check If the options are checked or unchecked with the below code.
$(".checkdrop").on("change", function(e) {
var $this = $(this);
var ischecked = e.target.checked;
if(ischecked) {
alert("checked it");
}
else
{
alert("unchecked it");
//$(elem).removeClass('c_disabled').removeAttr('disabled');
}
});
Here is my fiddle
Please help.

These lines are working on their own. You may check it on the console.
$(".c_disabled").prop("disabled",false);
$(".c_disabled").removeClass("c_disabled");

jquery click vs button executed function to find length of checkboxes

I am currently working with a JQuery function that determines if there are any checkboxes checked in my form. I'm using JQuery v1.10.2
This code works fine whenever I execute it with a button, but when I try to use a checkbox within the form to execute it, it does nothing. I've tested with a JFiddle, and that worked, but in my form, the alert does not fire. I've checked for redundant names, and my form id is unique. Could it be the div/table structures within the form causing some sort of conflict? The form is wrapped inside of a hidden div. Thanks for any help.
Below is the code:
<script>
$(document).ready(function(){
//$(".ksa_button_check").click(function(){
$(".ksa_check_k, .ksa_check_s").click(function(){
if ($("#ksaChecks input:checkbox:checked").length > 0) {
alert('is checked');
}
});
});
</script>

You could use something like this.
var checkboxes = $("input[type='checkbox']");
checkboxes.click(function() {
alert("Checkbox Is Checked");
});
http://jsfiddle.net/bowenac/aTDj6/1/
Not sure which language you are using. If you are using PHP you could check if $_POST has a value etc. If a checkbox is checked it would have $_POST data if not it would not.
Something like this.
if(isset($_POST['submit'])) {
$checkboxes = isset($_POST['checkbox']) ? $_POST['checkbox'] : array();
foreach($checkboxes as $value) {
Do something
);
};
};
Other than that I am wondering if your checkboxes are losing its state on your form submit. So yea as others said would help to see the code.

How to uncheck checkbox on back button?

Hi I have numbers of check boxes and below that I have a Button, which will filter data as per check box selection..
When I will click on filter button it will transfer to other page and when I click on back button the checkbox reamains checked.
but I want that when I click on back button then checkbox should be uncheck.
Any help.

For those who have similar issues, add autocomplete="off" to checkbox might help.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

You can reset the checkboxes on page load using jQuery
$('input:checkbox').prop('checked', false);
Demo (Checkbox will be never checked as onload am getting rid of checked property)
ondomready (Place the below code anywhere in your document)
$(document).ready(function(){
$('input:checkbox').prop('checked', false);
});

You may use below code :
window.onbeforeunload = function() {
//unchecked your check box here.
$("input[type='checkbox']").prop('checked', false)
};

Try this when back button is clicked
Use Jquery to clear the checkboxes
$("input[type='checkbox']").each( function() {
$(this).removeAttr('checked');
});

Jquery: If statement help, if (radio button is checked) then Jquery, else

I have this JQuery Code, Its in the DOM Ready, on click of .deleteCatFavs it runs this function. I want to add some If functionality to this but am having trouble.
// Delete a Favorite Category,
$('.deleteCatFavs').live("click", function(){
var actionRequested = "AJAX_delFavCat";
var url = "index.php";
var catId = $("input[name=FavCats]:checked").val();
var rowId = $("input[name=FavCats]:checked").attr("id");
$.post(url, {AJAX_Action: actionRequested, rowId: rowId},
function(data){
$("#favCats").html(data);
});
});
I want this to do something like this. I have used a isset() to show what I want to do in a PHP way, I just dont know how to do this in javascript.
// On DOM Ready, Hide .deleteCatFavs
$('.deleteCatFavs').hide();
// When the input radio button is checked [name=FavCats],
if(isset($("input[name=FavCats]:checked") // <-- if radio button is selected
$(".deleteCatFavs").show(); // Then show the Delete class,
// And if the .deleteCatFavs class is clicked, then run the JQuery code above
if (.deleteCatFavs.isClicked){
Run Jquery Code here';
}
So basically, When the radio button is checked, I want to show the .deleteCatFavs class, otherwise I want it hidden on DOM ready. And also, when the .deleteCatFavs is shown and clicked, It must run the above code.
Im sure this is so simple, I just dont know how to do isset queries in Javascript.
Also, lets keep it simple.

How about:
$("input[name='FavCats']").change(function () {
/* Fired immediately after a radio button is clicked with name='FavCats' */
$(".deleteCatFavs").show();
});
Which binds an event handler to the change event--I'm assuming that if any radio button with name FavCats is clicked, you want to show .deleteCatFavs.
And:
$(".deleteCatFavs").click(function () {
/* Run jQuery code when element with class deleteCatFavs is clicked */
});

try with latest jQuery v1.6 method prop
if ( $(elem).prop("checked") )