Uncheck All Checkmarks Onload

[galvin]

I am working on a site where users will click multiple checkboxes. They then submit to another screen and I noticed that if the user hits the BACK button, the checkboxes will still be checked and I don't wan't them to be.

 

So I basically want to have a function run "onload" that wipes out any checked checkboxes (NOTE: I first looked at disabling the BACK button completely, but read enough people saying that is a terrible idea )

 

Anyway, is there an easy way to wipe out any checked checkboxes, preferably with JQuery? (For this example, I have a form with an id of "items" which contains all the possible checkboxes and the individual checkboxes inputs are of class "checkbox")

[codefossa]

Quickly thrown together and untested. If you get a mistype, sorry.

 

Javascript / jQuery

// Wait for page load
$(document).ready(function()
{
   // Cycle through the input tags inside the ID "items"
   $("#items input").each(function()
   {
       // See if it's a checkbox
       if ($(this).attr("type") == "checkbox")
           $(this).attr("checked", false); // Set it not checked
   });
});

[galvin]

That works, thanks a lot Xaotique!!!

[Adam]

You can actually make this a little more efficient by making use of CSS3 selectors (jQuery will use them where possible) to only match input's that are checked in th first place:

 

http://jsfiddle.net/mx5Nr/

[codefossa]

You can actually make this a little more efficient by making use of CSS3 selectors (jQuery will use them where possible) to only match input's that are checked in th first place:

 

http://jsfiddle.net/mx5Nr/

Never occurred to me, but I like it. (:

 

On a side note. Since you're using jQuery, you could do it with that in one line.

$("#items input:checked").attr("checked", false);

 

To Adam:

Don't radio buttons and whatnot use the checked attribute as well? This might be a bad thing then if he didn't want them unticked.

 

Yeah .. another edit. Would $("#items input:checkbox:checked") then be the best solution?

Edited November 12, 2012 by Xaotique

[Adam]

The psuedo ":checkbox" selector is jQuery specific, which would mean internally jQuery can't use CSS3 selectors. If radio inputs are a problem then it would better to specify the type attribute:

 

$('#items input[type=checkbox]:checked').removeAttr('checked');

[codefossa]

The psuedo ":checkbox" selector is jQuery specific, which would mean internally jQuery can't use CSS3 selectors. If radio inputs are a problem then it would better to specify the type attribute:

 

$('#items input[type=checkbox]:checked').removeAttr('checked');

 

Thanks (: