Question

我有一个带有ul和li的树构建。每个li都有一个带有一些文本的复选框。检查父元素时，我需要检查所有子元素。我使用以下代码完成了它，它在FF和Chrome中有效，但在IE中却没有...

function checkSC(el){

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

}

html看起来像这样：

<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

请改用onclick。 IE似乎要等到你弄明白了。此外，只要您使用jQuery，就可以使用它将事件处理程序分配给对象而不是内联函数。

$(document).ready( function() {

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

});

如果您只是将此处理程序添加到特定复选框，则可能需要更改选择器。

Answer 2

尝试'onclick'代替'onchange'。 onchange不是复选框的有效事件。见http://www.w3schools.com/jsref/event_onchange.asp

Answer 3

$ parent已经是一个jQuery对象。你不需要将它包装在另一个jQuery obj中。这是做同样的事情：

$( $("#target_id") )

Answer 4

我认为问题可能来自您的onchange函数中使用的this关键字。

这篇文章http://forloop.co.uk/event-internals-in-jquery-part-one解释了jQuery如何处理事件，作为关于事件中如何解释this的模型之间差异的有趣警告：

处理程序函数内部是什么？

W3C和IE模型之间最大的区别之一是什么   this关键字（函数上下文）指的是事件内部   处理函数;在W3C模型中，这是对元素的引用   绑定事件处理程序但在IE中，这指的是   全局对象（浏览器中的窗口对象）。这真的可以旅行   如果你不注意的话，你（双关语）！

解决方案是使用jQuery绑定您的处理程序，因此不必处理不同的浏览器差异。

jquery .find适用于IE以外的所有浏览器

4 个答案: