Make javascript reference variable a value variable?

Question

I have a javascript function that goes something like this:

function doSomething(me) {
        var isMeChecked = me.checked;
        for (i=0;i<=10;i++) {
            me.checked = !isMeChecked;
            alert (me.checked);
        }
    }

I assumed that isMeChecked would remain constant after the first load, but it apparently is a reference variable to me.checked, and so it changes with every iteration. How do I force isMeChecked to get set to the value of me.checked when it's first loaded, and not the reference of me.checked?

Alright, to make this more clear, I am editing this post to show actual code in use that is exhibiting the undesirable behavior:

Here are the javascript functions:

function CheckAll(me, gridViewId) {
    var isMeChecked = (me.checked)?true:false;
    alert('CheckAllFired_1');
    Parent = document.getElementById(gridViewId);
    for (i = 0; i < Parent.rows.length; i++) {
        alert('CheckAllFired_2_' + i.toString());
        var tr = Parent.rows[i];
        var td = tr.childNodes[0];
        var item = td.firstChild;
        if (item.id != me.id && item.type == "checkbox") {
            alert('CheckAllFired_3_' + i.toString() + '_' + me.checked + '_' + isMeChecked);
            item.checked = !isMeChecked;
            item.click();
        }
    }
}
function CheckSelectAll(me, checkBoxHeaderId, gridViewId) {
    alert('CheckSelectAllFired_1');
    if (!me.checked) {
        alert('CheckSelectAllFired_2');
        document.getElementById(checkBoxHeaderId).checked = false;
        return;
    }
    else {
        alert('CheckSelectAllFired_3');
        document.getElementById(checkBoxHeaderId).checked = true;
        Parent = document.getElementById(gridViewId);
        for (i = 0; i < Parent.rows.length; i++) {
            alert('CheckSelectAllFired_4_' + i.toString());
            var tr = Parent.rows[i];
            var td = tr.childNodes[0];
            var item = td.firstChild;
            if (item.type == "checkbox") {
                alert('CheckSelectAllFired_5_' + i.toString());
                if (!item.checked) {
                    alert('CheckSelectAllFired_6_' + i.toString());
                    document.getElementById(checkBoxHeaderId).checked = false;
                    return;
                }
            }
        }
        return;
    }
}

I have an asp.net gridview. The first column is a column of checkboxes, with a checkbox in the header as well that toggles "Select/Deselect All" of the other checkboxes in the column. The checkbox in the header has it's onclick event set to onclick="CheckAll(this, 'myGridViewClientID')"

All of the remaining checkboxes in the grid, have their onlick event set to onclick="CheckSelectAll(this, 'headerCheckBoxID', 'myGridViewClientID'"

Both the headerCheckBoxID and myGridViewClientID are set in the codebehind when the gridview is rendering.

The idea is that when the checkbox in the header is checked, it will set all the other checkboxes to the opposite checked status, and then fire their click event to simulate a click, and also fire their onclick actions (which involve things like changing the color of their row, setting the datakey of the row into a SelectedValues array if it is checked, etc).

However, I also wanted the child checkboxes to have the following behavior: 1) If any of them get unchecked, uncheck the "select all" checkbox. 2) If all of them get checked, check the "select all" checkbox.

Now, because the click event of the child checkboxes has the opportunity to change the checked status of the headercheckbox, when the loop returns back to the "checkall" event, the state of the headercheckbox is different than when it first started, and so it ends up only checking the first child checkbox when trying to do a select all.

Using alerts, I was able to see that when the checked state of the headercheckbox is changed in the CheckSelectAll function, that value is also changed for the "isMeChecked" value in the CheckAll function which is spawning the CheckSelectAll functions.

That looks an awful lot like a reference variable then. I don't know how to stop it from doing that.

Answer 1

You could do var isMeChecked = me.checked?true:false;

Also, me.checked != isMeChecked is not the same as me.checked = !isMeChecked, which is probably what you intended.

Answer 2

Think about it. assume x.checked = true. run doSomething(x). When the function starts, me.checked is true. Now look at your for loop:

Pass 1: me.checked is true. so isMeChecked is true. so you set me.checked to false.

Pass 2: me.checked is false. isMeChecked is still true, because you don't change it inside the loop. so me.checked is again set to false.

Pass 3: see pass 2. ...

When the function exits, isMeChecked is true, and me.checked is false. All you have done is set me.checked to false 10 times. This is not a matter of isMeChecked being a reference (because it's not), but just an error in your logic if you were expecting different results.

Answer 3

Unless I'm crazy, there's no such thing as a reference to a boolean in javascript. They're always passed by value. Can you paste complete example code that we can run without filling in any blanks?

Answer 4

Your loop is just broken -- Read the comments

// doSomething({checked:true});
function doSomething(me) {
    // isMeChecked = true;
    var isMeChecked = me.checked;
    for (i=0;i<=10;i++) {
        // me.checked = false ... always...
        me.checked = !isMeChecked;
        alert (me.checked);
    }
}