correct method to check a checkbox

[Vittorio]

I already post a teaser to this question, and now I'm going to fully
explain.

I'm creating controls in a form dinamically, and I want to set their
initial state.
In particular checkboxes:

$('mycheckbox').checked=true; // I don't like this, breaks simmetry
with the rest of the code

$('mycheckbox').set('checked','checked');

$('mycheckbox').setProperty('checked','checked');

$('mycheckbox').setAttribute('checked','checked'); //works the best,
but why?

Didn't try the first, but have no reason not to think it works. So
let's say we have FOUR ways of setting a checkbox state (unfortunate
html creators: value should be a boolean, but is an optional string)

BUT only the fourth - setAttribute - works fine with RESET buttons.
All other sets "visually" the state of the checkbox, but don't change
the DOM (inspecting it with fb) and when RESET is pushed the checkbox
revert to unchecked.

Has anyone the insight of this mechanism? Can he/she explain? How
shall we code an plan about this issue?

Thank you


PS I know it's not the place but I want to tell you a trick I
"invented" with checkboxes (receving data in php - where "0" string is
falsy).

To always have a value wether true or false I used to:
<input type="hidden" name="thefieldname" value="0">
<label>A checkbox
<input type="checkbox" name="thefieldname" value="1">
</label>
eventually putting checked="checked" where it belonged.

It happens somehow that the second checkbox, if chosen, overwrites the
first.

Maybe this could be implemented in a plugin for mootools, to
"standardize" the way checkboxes are used.
Thank you

[Fábio Costa]

$('mycheckbox').set('checked', true);

is the 'correct' way, or maybe the mootools way.

Fábio Miranda Costa
Engenheiro de Computação
http://meiocodigo.com

[Vittorio]

Sorry I forgot to enumerate set('checked', true), but I already tested
it.
It's neat and works for setting the state on firefox3, but it doesn't
work on IE7 (at all) and it doesn't set the "default" state (the one
the checkbox returns when RESET is clicked).

I did other tests: setAttribute changes the DOM in ff and IE7 BUT in
IE7 the attribute is not respected when RESET is clicked (checboxes
get off)

Thank you
any other idea?

PS Simple html markup (not js generated) works flawlessly as expected

On Mar 17, 6:59 pm, Fábio Costa <fabiomco...@gmail.com> wrote:
> $('mycheckbox').set('checked', true);
>
> is the 'correct' way, or maybe the mootools way.
>
> Fábio Miranda Costa

> Engenheiro de Computaçãohttp://meiocodigo.com

> > Thank you- Hide quoted text -
>
> - Show quoted text -

[rpflo]

Here's a test case:

http://sosaladesign.com/checkboxTestCase/

Try it on the browser of your heart.

I tested it on Safari 4 Beta (OSX), FireFox 3 (OSX), and IE7 (XP).
All passed with serious tenacity. Whatchoo talkin' about willis?

[rpflo]

Here's a test case.

http://sosaladesign.com/checkboxTestCase/

The party is hopping in Safari 4 Beta, FireFox 3, and IE7 with all
methods. Not sure what you're running into.



Meanwhile ... I've tried posting this 3 times, once it showed up but
then disappeared. I apologize if I'm double posting.

On Mar 17, 12:18 pm, Vittorio <Vittorio.Zampare...@gmail.com> wrote:

[rpflo]

Wow, I'm on a roll here. It's been a long day, I didn't notice the
reset concerns. I updated the test case and you're right, IE is
busted altogether.

setAttribute survives the reset in firefox and safari, but all the
rest are busted there too.

[Vittorio]

>>Whatchoo talkin' about willis?
LOL tens of years and thousands of miles and we share that line :D

> > > - Show quoted text -- Hide quoted text -

[Fábio Costa]

That's really nasty...

Fábio Miranda Costa
Engenheiro de Computação
http://meiocodigo.com

[Vittorio]

Your test is VERY interesting, I should learn to do them more
routinely.
Behaviour is quite clear now and one can chose the fittest route.
It's strange that resetForm works on startup (the code seems the same)
but not exactly the same on following triggerings
I'm going to pick your test and try some changes, maybe adding
form.reset() and such.
I'll report here any news.

Anyway thank you fo your attention. It is always a pleasure to talk to
mootoolers. :)

> > > > - Show quoted text -- Hide quoted text -

[Vittorio]

it works fine in rpflo test but not in my live code
I'll work out the differences (for example my code runs in
transitional mode while rpflo in a strict mode)

On Mar 18, 12:57 pm, Fábio Costa <fabiomco...@gmail.com> wrote:
> That's really nasty...
>
> Fábio Miranda Costa

> Engenheiro de Computaçãohttp://meiocodigo.com

[Vittorio]

Ok I reworked rpflo test and found out couple things
http://cyberchicken.no-ip.com/WebDev/1-code/r&d/forms/checkboxTestCase/index.php

FIRST
set('checked',true) doesn't work on an element which is not part of
the DOM or of another element
if I do
checkbox=new Element('input')
.set('type','checkbox')
.set('checked',true);
it doesn't work.

if I delay the setting of the state of the checkbox it works:
new Element('label')
.adopt(
checkbox=new Element('input')
.set('type','checkbox')

)
.appendText('label text');
checkbox.set('checked',true);



SECOND
I tryed form.reset() but I'm not able to use it in ff nor in ie.
https://developer.mozilla.org/En/DOM/Form.reset
firebug says that such method doesn't exists. What could it mean?

[Vittorio]

Forgot to point out: strict or transitional mode wasn't the
difference.
It was just the js generation of controls vs markup coding of them

On Mar 18, 3:54 pm, Vittorio <Vittorio.Zampare...@gmail.com> wrote:
> Ok I reworked rpflo test and found out couple thingshttp://cyberchicken.no-ip.com/WebDev/1-code/r&d/forms/checkboxTestCas...

>
> FIRST
> set('checked',true) doesn't work on an element which is not part of
> the DOM or of another element
> if I do
> checkbox=new Element('input')
>         .set('type','checkbox')
>         .set('checked',true);
> it doesn't work.
>
> if I delay the setting of the state of the checkbox it works:
> new Element('label')
>         .adopt(
>                 checkbox=new Element('input')
>                         .set('type','checkbox')
>
>         )
>         .appendText('label text');
> checkbox.set('checked',true);
>
> SECOND

> I tryed form.reset() but I'm not able to use it in ff nor in ie.https://developer.mozilla.org/En/DOM/Form.reset

[Vittorio]

I found out I was making the WRONG question:
I actually mixed the current state with the default state.
But since i did many tests and found many strange things I'm going to
post a report on them.
For now just get this: to work nice with reset buttons use .set
('defaultChecked',bool) BUT remember to set also the current state .set
('defaultChecked',bool) which could be different.
Same thing I think for select.

See
http://www.w3.org/TR/2000/CR-DOM-Level-2-20000307/html.html (search
defaultChecked)
and
http://msdn.microsoft.com/en-us/library/ms533715(VS.85).aspx

watch out: still some browser inconsistencies
stay tuned

[Fábio Costa]

Nice to know this.
Thanks for sharing.

Fábio Miranda Costa
Engenheiro de Computação
http://meiocodigo.com

[Vittorio]

mistype, should read:

>to work nice with reset buttons use

> .set('defaultChecked',bool) BUT remember to set also
> the current state .set('checked',bool) which could be different.

update (still working on the tests and on an explanation article):
-use el.defaultChecked=bool beacause .set('defaultChecked',bool) is
not trapped correclty by mootools it seems (I might be wrong)
-try to set those properties *after* elemente has been attached to
another element (else IE delays the parsing and behaviour change)

On Mar 19, 5:46 pm, Vittorio <Vittorio.Zampare...@gmail.com> wrote:
> I found out I was making the WRONG question:
> I actually mixed the current state with the default state.
> But since i did many tests and found many strange things I'm going to
> post a report on them.
> For now just get this: to work nice with reset buttons use .set
> ('defaultChecked',bool) BUT remember to set also the current state .set
> ('defaultChecked',bool) which could be different.
> Same thing I think for select.
>
> Seehttp://www.w3.org/TR/2000/CR-DOM-Level-2-20000307/html.html(search
> defaultChecked)

> andhttp://msdn.microsoft.com/en-us/library/ms533715(VS.85).aspx