Question

I’m having trouble manipulating JavaScript generated html elements. Depending on user input – a list of checkboxes gets generated via JavaScript, which the user can then uncheck with one click. Here’s the generated code:

<ul>
  <li><input name="fruit" id="apple" type="checkbox" checked="checked"></li>
  <li><input name="fruit" id="orange" type="checkbox" checked="checked"></li>
  <li><input name="fruit" id="mango" type="checkbox" checked="checked"></li>
</ul>

To clear everything out I have,

<a id="clear" href="#">Clear Fruit</a>

I tried going off the name attribute but it looks like jQuery can’t see the generated elements after the fact. What’s the best way to grab the list and go through the items to uncheck the boxes?

Answer 1

$('#clear').click(function(e){
    e.preventDefault();
    $('input[name=fruit]').prop('checked', false);
});

Here’s the fiddle: http://jsfiddle.net/heyUx/

---

P.S. If you’re using jQuery < 1.6 you should use attr instead of prop:

$('input[name=fruit]').attr('checked', '');