Question

function checkUncheckAll(theElement) {
        var theForm = theElement.form, z = 0;
        while (theForm[z].type == 'checkbox' && theForm[z].name != 'checkall') {
                theForm[z].checked = theElement.checked;
                z++;
        }
}

theElement是复选框列表底部的checkall复选框。单击时，它调用此函数将所有复选框以相同的形式设置为checkall的值。

除了IE中的一个小故障外，它适用于所有浏览器。单击checkall框后，似乎复选框已更新，但您没有看到它。如果单击页面上的任意位置，则复选框将更新为其正确状态。检查和取消检查都会发生这种情况。

Answer 1

没有jQuery这很容易，这里没有必要。

function checkUncheckAll(theElement) {
    var formElements = theElement.form.elements;
    for (var i = 0, len = formElements.length, el; i < len; ++i) {
        el = formElements[i];
        if (el.type == "checkbox" && el != theElement) {
            el.checked = theElement.checked;
        }
    }
}

更新

事实证明，主要问题是checkUncheckAll()函数是从复选框上的change事件处理程序调用的，在复选框失去焦点之前不会在IE中触发，因此修复只是将其更改为使用click事件处理程序。

Answer 2

执行此操作的最佳方法是使用jQuery。它需要包括一个库，但它非常值得！ jQuery处理跨浏览器的js / DOM问题，并提供了出色的选择器语法和修改方法。

此博客文章中提供了与您类似的其他示例：

http://www.iknowkungfoo.com/blog/index.cfm/2008/7/9/Check-All-Checkboxes-with-JQuery

function checkUncheckAll(theElement){
    newvalue = $(theElement).is(':checked');  
    $("INPUT[type='checkbox']", theElement.form).attr('checked', newvalue);
}

Javascript检查/取消选中所有功能。 IE不会更新

2 个答案:

更新