Question

I have a tree build with ul and li. Each li has an checkbox with some text. I need to check all child elements when the parent element is checked. I did it with following code, which works in FF and Chrome but not in IE…

function checkSC(el){

var $parent = $(el).parent();
$($parent).find('input[type="checkbox"]').attr("checked", el.checked);

}

The html looks like this:

<ul id="treeUL" class="treeview-black treeview">
  <li class="collapsable">
   <div class="hitarea collapsable-hitarea"></div>
   <input type="checkbox" onchange="checkSC(this)" value="26" name="chkComm">
    Conseil d'Administration
   <ul>
      <li>
        <input type="checkbox" onchange="checkSC(this)" value="29" name="chkComm[29]">
        Bureau
      </li>
      <li>
        <input type="checkbox" onchange="checkSC(this)" value="31" name="chkComm[31]">
        Comité de Direction
      </li>
      <li class="last">
      <input type="checkbox" onchange="checkSC(this)" value="62" name="chkComm[62]">
       Administrateurs Suppléants
      </li>
   </ul>
</li>

Answer 1

Use onclick instead. IE seems to wait until you’ve blurred the checkbox. Also, as long as you are using jQuery, use that to assign event handlers to objects instead of inline functions.

$(document).ready( function() {

    $("input[type='checkbox']").click( function() {
         $(this).parent().find('input[type="checkbox"]').attr("checked", this.checked);
    });

});

You may want to alter the selector if you are only adding this handler to specific checkboxes.