INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

attribute for checkbox not valid

attribute for checkbox not valid

(OP)
I have a checkbox I am trying to set and cannot seem to use "attr" or "prop" to check it.

CODE

$(".btnInstructionsCheck").click(function () {
    $(thisNotesButton).parents("tr")[0].firstElementChild.firstElementChild.attr("checked", "true");
     //$(thisNotesButton).parents("tr")[0].firstElementChild.firstElementChild.checked = true;
}) 

This code will give me this error:

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'attr'

The element I am looking is valid.

If I comment out the ".attr" line and uncomment the ".checked" line, it works fine.

In other places I use attr to check the checkbox fine.

Why wouldn't this one work?

Thanks,

Tom

RE: attribute for checkbox not valid

.attr is JQuery. For Javascript,use one of the following

CODE

...firstElementChild.checked = true
...firstElementChild["checked"] = true 
Basically the syntax is one of

object.property = xxx
object["property"] = xxx

RE: attribute for checkbox not valid

xwb -> from the $ JQ selector and click event syntax, it would seem they are using JQuery, but with a mish mash of JQ and vanilla JavaScript.

tshad -> Once you have the JQuery framework installed, I recommend you use JQuery where ever possible.

Without seeing your mark-up and intention it's difficult for us to provide correct syntax, but it's something along the lines..

CODE

$(this).parent().find('tr').first().first().prop('checked', true); 

However, this is a complete guess due to lack of HTML.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: attribute for checkbox not valid

There are HTML attributes and JavaScript DOM object properties. Some HTML attributes are mapped to DOM object properties.
Especially in case of <input type="checkbox" ...> if we create an attribute checked then the object property checked will be set to true.
But in this case this mapping seems to be one-directional, namely if we set the object property checked to true then the HTML-attribute checked will not be created automatically.

example:

CODE

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>CheckBox</title>
  </head>
  <body>
  
   <h1>Checkbox</h1>

   <p> 
   <label>On/Off
     <input type="checkbox" id="cb" name="cb" value="1">
   </label>
   </p>

   <script type="text/javascript">
     // DOM
     var cb =  document.getElementById('cb');
     console.log(cb);
     // checked: Attribute and Property
     console.log('Attribute: checked = ' + cb.getAttribute('checked'));
     console.log('Property: checked  = ' + cb.checked);

     alert('Now setting the attribute checked');
     // this creates new attribute checked which sets the property checked
     cb.setAttribute('checked', 'foo');
     //cb.checked = 'foo';
     //cb['checked'] = 'foo';

     console.log(cb);
     console.log('Attribute: checked = ' + cb.getAttribute('checked'));
     console.log('Property:  checked = ' + cb.checked);     
   </script>

  </body>
</html> 

The output at the FF console looks like:

CODE

<input type="checkbox" value="1" name="cb" id="cb">
Attribute: checked = null 
Property: checked  = false 
<input type="checkbox" value="1" name="cb" id="cb" checked="foo"> 
Attribute: checked = foo
Property:  checked = true 

With the jQuery it seems to work at similar way:

CODE

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>CheckBox</title>
  <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
  </script>  
  </head>
  <body>
  
   <h1>Checkbox</h1>

   <p> 
   <label>On/Off
     <input type="checkbox" id="cb" name="cb" value="1">
   </label>
   </p>

   <script type="text/javascript">
     // jQuery
     var cb =  document.getElementById('cb');
     console.log(cb);
     //console.log($('#cb'));
     // checked: Attribute and Property
     console.log('Attribute: checked = ' + $('#cb').attr('checked'));
     console.log('Property: checked  = ' + $('#cb').prop('checked'));

     alert('Now setting the attribute checked');
     // this creates new attribute checked which sets the property checked
     $('#cb').attr('checked','foo');
     //$('#cb').prop('checked', 'true');

     console.log(cb);
     //console.log($('#cb'));
     console.log('Attribute: checked = ' + $('#cb').attr('checked'));
     console.log('Property:  checked = ' + $('#cb').prop('checked'));     
   </script>

  </body>
</html> 

Output:

CODE

<input type="checkbox" value="1" name="cb" id="cb">
Attribute: checked = undefined
Property: checked  = false
<input type="checkbox" value="1" name="cb" id="cb" checked="foo">
Attribute: checked = checked
Property:  checked = true 

So, IMO the OP's example should work with the setting the checked-attribute too.
But to understand why it's not working the posting of the HTML code would be necessary.

RE: attribute for checkbox not valid

Btw
@tshad: why are you trying to do everything with jQuery?
IMO, doing things with JS DOM are better to understand, than with JQuery. (at least for beginners like me smile)

E.g. from the example above

CODE

console.log(cb); 
prints

CODE

<input type="checkbox" value="1" name="cb" id="cb" checked="foo"> 
so I clearly see that it's the inputbox with the given attributes

with the jQuery object

CODE

console.log($('#cb')); 
it's more cryptic

CODE

Object { 0: <input#cb>, length: 1, context: HTMLDocument → checkbox_checked_jQuery.html, selector: "#cb" } 


@others: What should be actually the advantage of JQuery against the DOM ?

RE: attribute for checkbox not valid

>> @others: What should be actually the advantage of JQuery against the DOM ?

Well for me what I find I get from JQuery is : Speed, syntax, readability, power, cross browser compatibility

... to name but a few

Once you get into JQuery, you will never want to write Vanilla JS again, well I don't anyhow - of course YMMV.

If you have loaded the JQ framework, you might as well use it IMO.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: attribute for checkbox not valid

Hi 1DMF,
Thank you very much for your opinion.
The cross browser compatibility is a very good point.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close