internet explorer - Javascript checkuncheck all function. IE doesn't update - Stack Overflow

admin管理员组

文章数量:1289638

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 is the checkall checkbox at the bottom of a list of checkboxes. when clicked it calls this function to set all checkboxes in the same form to the value of checkall.

It works across all browsers aside from one glitch in IE. After clicking the checkall box it seems like the checkboxes are updated, but you don't see it. If you click anywhere on the page the checkboxes are then updated to their proper status. This happens for both checking and unchecking.

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 is the checkall checkbox at the bottom of a list of checkboxes. when clicked it calls this function to set all checkboxes in the same form to the value of checkall.

It works across all browsers aside from one glitch in IE. After clicking the checkall box it seems like the checkboxes are updated, but you don't see it. If you click anywhere on the page the checkboxes are then updated to their proper status. This happens for both checking and unchecking.

• javascript
• internet-explorer

Share Improve this question Follow edited Dec 2, 2010 at 0:11 Alex 66k4949 gold badges153153 silver badges181181 bronze badges asked Dec 1, 2010 at 19:56 Kyle BuserKyle Buser 36322 silver badges88 bronze badges 3

• ... and wele to StackOverflow @Kyle! You probably had no idea what you were getting yourself into when you asked this question. We all would love to know what you think. ; ) – Mike Grace Commented Dec 2, 2010 at 0:08
• Thanks for the wele Mike. While I appreciate everyone's enthusiasm nobody has actually addressed the issue. The issue is that the DOM elements don't get updated in IE after the function is called. Performing any action afterwards updates the DOM and the boxes get checked or unchecked as desired. The issue doesn't exist with FF or Chrome. – Kyle Buser Commented Dec 2, 2010 at 21:19
• There must be some conflicting code on the page that IE doesn't like, but others don't have an issue with... – Kyle Buser Commented Dec 2, 2010 at 21:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

This is easy without jQuery, which is unnecessary here.

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;
        }
    }
}

Update

It turned out the main problem was that the checkUncheckAll() function was being called from a change event handler on a checkbox, which doesn't fire in IE until the checkbox loses focus, so the fix was simply a matter of changing it to use a click event handler instead.

The best way to do this is to use jQuery. It does require including a library, but it's well worth it! jQuery handles cross-browser js/DOM issues, and provides an excellent selector syntax and modification methods.

Additional examples similar to yours are hilighted in this Blog Post:

http://www.iknowkungfoo./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);
}

本文标签： internet explorerJavascript checkuncheck all function IE doesn39t updateStack Overflow