On Jan 19, 6:03 am, fernando trasvina <[email protected]> wrote:
> On Jan 18, 2011, at 12:15 PM, Miller Medeiros wrote:
>
>
>
> > On Tue, Jan 18, 2011 at 9:47 AM, Diego Perini <[email protected]> 
> > wrote:
>
> >    $('#my-check-box').attr('checked', true);
>
> > will confuse users into believe that "false" in the above statement is
> > needed to achieve the opposite effect of unchecking the element
> > attribute, which is not the case. Instead a "removeAttr()" will be
> > needed to achieve that effect (with UI live attributes like
> > "checked").
>
> > if you pass false to the checked attribute it will uncheck it.. (it 
> > probably calls removeAttr internally)
>
> What i think it does (actually from making several tests)

The code is publicly available, no need to depend on empirical
evidence.

> when you create a checkbox and get the checked property you obtain false
> if you click on it and ask for checked attribute you obtain true

That sums up the issue with jQuery's attr function - it mixes up
attributes and properties to the extent that it is difficult to tell
which they are using unless you read the code.

There is rarely a need to use attributes anyway, particularly as IE's
implementation of get/setAttribute is broken. DOM properties are more
appropriate in the vast majority of cases, not least because they are
more consistent across browsers and simpler to access.

E.g. what do you expect the following to show?

  <input type="button" value="Test checked" onclick="
    alert( !!document.getElementById('cb0').getAttribute('checked'));
  ">
  <input type="checkbox" id="cb0" checked value="foo">

You may be surprised to see boolean false in Firefox even though the
checked attribute is present, because the value of the checked
*attribute* is an empty string, which type-converts to boolean false.
IE shows true.

Similarly:

  <input type="button" value="Set checked" onclick="
    var el = document.getElementById('cb1');
    el.setAttribute('checked', false);
  ">
  <input type="checkbox" id="cb1" value="foo">

Will check the checkbox in Firefox (because the supplied value is
irrelevant) but not in IE. It is because of these types of quirks and
inconsistencies that get/setAttribute should be avoided and DOM
properties used.

Once you start using properties, there is no need for methods like
attr. The only reason to use it at all is for non-standard attributes,
where some browsers require get/setAttribute as they will not create
equivalent DOM properties from inline HTML.

However the use of non-standard attributes (and "expando" properties)
in HTML should be avoided, so again, no need for get/setAttribute.


> now passing any JavaScript falsy value to checked will uncheck the checkbox 
> and getting later the value you will get a false

Except that the string "false" is not falsy (replace Boolean false
with the string "false" in the setAttribute test above and all
browsers will check the checkbox), a common cause of confusion. The
checked attribute has no value, its presence or absence is the key.
The checked property always has a Boolean value and so is much simpler
to use.


> same occurs when passing any truthy  value you will get true when getting the 
> value later
>
> removing the checked attribute has no effect on the input

Depends on the browser and what the user has been doing. Removing the
*attribute* unchecks a checkbox in Firefox if the user hasn't modified
it first, but not in IE. Whether or not you can remove the property is
moot. It reinforces the advice not to mess with attributes as the
results are unreliable, use DOM properties.

  <input type="button" value="Remove checked" onclick="
    var el = document.getElementById('cb2');
    el.removeAttribute('checked');
  ">
  <input type="checkbox" checked id="cb2" value="foo">


> so from this i would recommend to use true or false for checked attribute to 
> keep things clear

I would not.

>
> correct me if i am wrong pls.

Do not use element attributes in code for reasons stated above, always
use DOM properties.


--
Rob

-- 
To view archived discussions from the original JSMentors Mailman list: 
http://www.mail-archive.com/[email protected]/

To search via a non-Google archive, visit here: 
http://www.mail-archive.com/[email protected]/

To unsubscribe from this group, send email to
[email protected]

Reply via email to