attribute for checkbox not valid

tshad · Aug 31, 2015

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

xwb · Sep 21, 2015

.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

1DMF · Sep 21, 2015

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

mikrom · Sep 21, 2015

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="[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">[/URL]
  </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.

mikrom · Sep 21, 2015

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

)

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 ?

1DMF · Sep 22, 2015

>> @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

mikrom · Sep 22, 2015

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

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

attribute for checkbox not valid

tshad

Programmer

xwb

Programmer

1DMF

Programmer

mikrom

Programmer

mikrom

Programmer

1DMF

Programmer

mikrom

Programmer

Similar threads

Part and Inventory Search

Sponsor