使用复选框递归地标记复选框

Question

我使用下面的函数来分组切换复选框。

<script type=text/javascript>
function toggle(source, wild_name) {
  checkboxes = document.getElementsByName(wild_name);
  for(var i in checkboxes)
    checkboxes[i].checked = source.checked;
}
</script>

因此，当我单击复选框时，其定义为：

<input type="checkbox" onchange="toggle(this, 'tweak_os')" name="toggle_tweak_os"> Toggle All

它会选中任何名为“tweak_os”的复选框。但是我正在尝试这样做，如果一个checkbox调用了选中另一个checkbox的函数，那么应该执行相同的函数。在以下代码中：

<input type="checkbox" onchange="toggle(this, 'toggle_tweak_os')" name="toggler">
<input type="checkbox" onchange="toggle(this, 'tweak_os')" name="toggle_tweak_os">
<input type=checkbox id=tweak_os_1 name=tweak_os value=tweak_os_1>

我希望当第一个名为"toggler“的复选框被点击时，最后一个名为"tweak_os”的复选框被选中。

Answer 1

尝试触发checkbox的onchange函数(如果存在)

if (checkboxes[i].onchange) checkboxes[i].onchange();

演示： http://jsfiddle.net/wDBxb/

function toggle(source, wild_name) {
    checkboxes = document.getElementsByName(wild_name);
    for (var i in checkboxes) {
       checkboxes[i].checked = source.checked;
       if (checkboxes[i].onchange) checkboxes[i].onchange();
    }   
}

Answer 2

第一个复选框更改导致选择第二个而不是第三个，因为当使用代码更改时，不会触发not second复选框的更改。如果定义了checkboxes，您还需要使用代码触发checkboxes的更改事件。

function toggle(source, wild_name) {
    checkboxes = document.getElementsByName(wild_name);
    for (var i in checkboxes) {
        checkboxes[i].checked = source.checked;
        if (typeof checkboxes[i].onchange == "function") {
            checkboxes[i].onchange();
        }
    }
}​