tags:

views:

577

answers:

7

I have the following html page:

<html>
<body>

<script>
    var check = 0;

function doNow()
{
  void(d=document);

  void(el=d.getElementsByTagName('INPUT'));
  for(i=0;i<el.length;i++)
    {
        if(check == 0)
            void(el[i].checked=1)
        else
            void(el[i].checked=0) 
    }
   if(check == 0)
       check = 1;
   else 
       check = 0;
}

</script>
<HR>
<form>
<INPUT TYPE="CHECKBOX" name="DG1">DG1
<INPUT TYPE="CHECKBOX" name="DG2">DG2
<INPUT TYPE="CHECKBOX" name="DG3">DG3
<INPUT TYPE="CHECKBOX" name="DG4">DG4
<INPUT TYPE="CHECKBOX" name="DG5">DG5

<input type=button onclick="doNow()" value="CheckBox All Now">

</form>
</body>
</html>

If "CheckBox All Now" is clicked all checkboxes are checked. Then, if "Back" button or "Refresh" button is pressed. The "CheckBox All now" has to clicked twice to uncheck all checkboxes.

Please let me know how to handle "CheckBox All Now" in case of "Refresh" or "Back".

Thanks in Advance, Mahesh.

A: 

Hello Ivan, I didn't under stand your answer. How to put checked fields in session?

Thanks in Advance, Mahesh.

+1  A: 

My suggestion is to use a checkbox instead of a button. When someone clicks on the checkbox, all other checkboxes will be set to however that checkbox is set.

So, if the "Check all" checkbox is checked, and you click it. all other checkboxes will be cleared.

Should work a bit better in the scenario you describe.

Phill Sacre
The underlying problem - that of initialising the "check" variable to zero regardless of the actual checkbox state - will persist regardless of what HTML elements are used to call the Javascript.
Andrzej Doyle
If you use a checkbox, you can dispense with a "check" variable. Should have made that clearer.
Phill Sacre
A: 

Hello Phill Sacre,

Thanks for you suggestion. But still problem persists.

+2  A: 

It's because when the page is reloaded, the Javascript is parsed and your declaration

var check = 0;

unsurprisingly causes the check variable to be reset to zero at this point. Thus after the page is reinitialised, the first click of the button will enable all checkboxes. It seems that the issue here stems from a difference in how the form renderer remembers state, and how the Javascript engine remembers "state". The latter can't really be "fixed" the way you want as the script essentially needs to be run every time.

What you might choose to do is pull the initial "checked" state out of the controls themselves. Your current code explicitly assumes that the checkboxes will all be unchecked initially (this is basically what you're saying by "check = 0"; this variable is storing the state of the checkboxes as far as the Javascript is aware). Instead, you might change the line to:

var check = document.getElementsByTagName('INPUT')[0].checked;

Of course, this wouldn't work in the current location as it is declared before the form is defined. You would either need to register this as a closure to be run once the document has loaded, or alternatively pull this line out and put it in <script> tags that occur after the form element in the document (this isn't the cleanest way to do it but works for quick-and-dirty development; registration of functions within the head is the way to go in general).

I've tested both approaches and they work. I'm sure that there will be other potential solutions to this issue that come up with other peoples' answers!

EDIT: Big edit after thinking about this for a while. The fundamental issue here is that the check variable gets out-of-sync with the actual checkboxes themselves - what I described above is a way to avoid this when the page is reloaded/reinitialised.

However, you will still have other issues. What happens if the user manually clicks all of the checkboxes? They will now be active, but your check variable will still be 0, and so click the "check all" button will activate them all (which will have no effect). If I clicked this button with all checkboxes checked, I would expect it to behave consistently, regardless of how those checkboxes got to that state (which should be irrelevant).

Also, what happens if some of your checkboxes are checked and some are unchecked? What is the button meant to do in that situation?

The best solution overall would probably be to remove the check variable altogether, and instead work it out on demand at thstart of every doNow call. That is, inspect the array of checkboxes, read their current values and from this derive what the checkboxes should be set to. (This might be really simply if, for example, the functionality turns out to be that every checkbox should simply be individually inverted - it depends on the actual functional requirements.)

(Also, as a coding style issue, the part of your code that says


if(check == 0)
    void(el[i].checked=1)
else
    void(el[i].checked=0)

can simply be replaced by

el[i].checked = (1 - check);

and asides from the fact that we're hopefully getting rid of this variable, it ought to be a boolean rather than an integer as it only has two states.)

Andrzej Doyle
A: 

Hello dtsazza,

Thanks for your solution. It is working for back & refresh case. But for the first time when the html page is opened. I need to click the "CheckBox All Now" button twice to check all the checkboxes.

Best regards,

post comments - not more answers please
annakata
That is strange, since the script should pick up the current value of the checkboxes regardless - perhaps it's a timing issue (execution vs initialisation) in "certain" browsers. See my edit though as you should probably get rid of the <code>check</code> variable altogether.
Andrzej Doyle
A: 

dtsazza is right - when the page is refreshed you start from scratch.

I note that the 'Check All Now' button actually toggles the checked status. How about 2 buttons (links might be better); one to check all and one to uncheck all?

paul
A: 

You could store the checked variable in a hidden field. That way it would persist with the same longevity as the checkboxes.

recursive