This code should clear the checkboxes when I click the button. It works if I remove the <form></form> tags, but I thought .find() was supposed to find all descendants?

<script type="text/javascript">
$(document).ready(function(){

      var clearCheckboxes = function() {    
        $('.outerbox').find('input').each(function() {
          $(this).attr('checked', false);
        });
      }

      $('input.myButton').click(clearCheckboxes);
});
</script>

<div class="outerbox">    
  <form>
    <input type="checkbox" checked="" /> checkbox1
    <input type="checkbox" checked="" /> checkbox2
  </form>    
</div>
<input class="myButton" value="clear checkboxes now" type="button"/>

This code should clear the checkboxes when I click the button. It works if I remove the <form></form> tags, but I thought .find() was supposed to find all descendants?

<script type="text/javascript">
$(document).ready(function(){

      var clearCheckboxes = function() {    
        $('.outerbox').find('input').each(function() {
          $(this).attr('checked', false);
        });
      }

      $('input.myButton').click(clearCheckboxes);
});
</script>

<div class="outerbox">    
  <form>
    <input type="checkbox" checked="" /> checkbox1
    <input type="checkbox" checked="" /> checkbox2
  </form>    
</div>
<input class="myButton" value="clear checkboxes now" type="button"/>

• javascript
• jquery

• 3 Try using .prop instead of .attr – kinakuta Commented Apr 30, 2012 at 15:41
• 2 It's working fine apparently - jsfiddle/gYHKA – Nikhil Baliga Commented Apr 30, 2012 at 15:42
• 1 Works for me: jsfiddle/CgsEu – gen_Eric Commented Apr 30, 2012 at 15:42
• 2 This jsFiddle has your code in it and it seems to work fine. Doesn't seem to be a jQuery issue, maybe the browser you are using. jsfiddle/aC6g2 – Michael Allen Commented Apr 30, 2012 at 15:43
• 1 yes :) would be a good question though. Actually, does it have anything to do with the fact that I'm trying to call this code on .submit rather than .click? – JYX Commented Apr 30, 2012 at 15:49

5 Answers 5

This code works fine for me: http://jsfiddle/CgsEu/

Anyway, if you are using the latest jQuery, try changing .attr to .prop. Also the .each isn't needed. .attr and .prop work on all elements in a jQuery object.

var clearCheckboxes = function() {    
    $('.outerbox').find('input').prop('checked', false)
}

DEMO: http://jsfiddle/CgsEu/1/

If there are other inputs, try limiting the .find to just checkboxes.

var clearCheckboxes = function() {    
    $('.outerbox').find('input:checkbox').prop('checked', false)
}

DEMO: http://jsfiddle/CgsEu/2/

$(document).ready(function(){
  var clearCheckboxes = function() {    
      $('.outerbox').find('input[type="checkbox"]').each(function(){
          $(this).prop('checked', false);
      });
  }

  $('input.myButton').click(clearCheckboxes);
});​

DEMO.

Update:

$('.outerbox').find('input[type="checkbox"]').prop('checked', false);

or

$('.outerbox input:checkbox').prop('checked', false);

DEMO.

There's no need to use each(), you already have a collection of the elements and can apply the change to all of them, like so:

var clearCheckboxes = function() {    
    $('input', '.outerbox').attr('checked', false);
}

$('input.myButton').click(clearCheckboxes);

FIDDLE

There are a lot of suggestions to use prop() over attr(), and that is probably sound advice.

According to the W3C forms specification, the checked attribute is a boolean attribute, which means the corresponding property is true if the attribute is present at all—even if, for example, the attribute has no value or an empty string value. The preferred cross-browser-patible way to determine if a checkbox is checked is to check for a "truthy" value on the element's property using one of the following:

if ( elem.checked )

if ( $(elem).prop("checked") )

if ( $(elem).is(":checked") )

To maintain backwards patability, the .attr() method in jQuery 1.6.1+ will retrieve and update the property for you so no code for boolean attributes is required to be changed to .prop(). Nevertheless, the preferred way to retrieve a checked value is prop().

Use prop, e.g.

$(this).prop('checked', false);

instead if attr

var clearCheckboxes = function() {    
  $('input[type="checkbox"]', '.outerbox').prop('checked', false);
}

$('input.myButton').click(clearCheckboxes);