CODEWITHSUNDEEP
javascriptjquery
JYX
JYX

Reputation: 2663

jquery .find() not working

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"/>

Upvotes: 1

Views: 5835

Answers (5)

adeneo
adeneo

Reputation: 318362

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-compatible 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 compatability, 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().

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

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

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

Upvotes: 0

The Alpha
The Alpha

Reputation: 146269

$(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.

Upvotes: 1

izb
izb

Reputation: 51860

Use prop, e.g.

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

instead if attr

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227310

This code works fine for me: http://jsfiddle.net/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.net/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.net/CgsEu/2/

Upvotes: 2

Related Questions