Setting Checkbox in a Table Using Javascript

Question

Trying to set a checkbox inside a table. I thought it would be straightforward and similar to doing it in a form.

I can do this successfully with a form , but getting stuck when the checkbox is in a table.

When the checkbox is in a form I use:

 <form name="access_menu_form">
    <input type="checkbox" name="mybox_name" id="mybox_id" value="1">
 </form>

 document.access_menu_form.mybox_name.checked == true

Which works great!!

I know I am missing a key point about the DOM. Trying to set a checkbox that I have in table fails using a similar technique which fails:

My table:

 <table name="access_table">
   <thead>
    <tr>
      <th>Area</th> 
      <th>Item</th> 
      <th>Access</th> 
    </tr>
  </thead>
 <tr>
   <td><input type="checkbox" name="mybox_name" id="mybox_id" value="1"></td>
   <td><input type="checkbox" name="mybox1_name" id="mybox1_id" value="1"></td>
   <td></td>
 </tr>
 </table>

My script

 document.access_table.mybox_name.checked = false;

I get the error: Uncaught TypeError: Cannot read property 'mybox' of undefined

 document.mybox_name.checked = false;

I get the error: Uncaught TypeError: Cannot set property 'checked' of undefined

Ha ha. So many people answered so quick and pretty much all the same! Thanks for the help guys. I did try that but I must have been missing something. It worked! — William T Wild
– William T Wild, Commented Jul 20, 2011 at 19:23

Digitz · Accepted Answer · 2011-07-20 18:57:20Z

1

Use the 'checked' attribute
let javascript find the checkbox using the following, document.getElementById('mybox_id')

answered Jul 20, 2011 at 18:57

Digitz

3333 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pimvdb · Accepted Answer · 2011-07-20 18:52:51Z

1

If you have IDs, the most straight-forward way is using getElementById:

document.getElementById('mybox_id').checked == true;

It will always work no matter where the element is residing.

answered Jul 20, 2011 at 18:52

pimvdb

155k80 gold badges313 silver badges357 bronze badges

Comments

Shawn Steward · Accepted Answer · 2011-07-20 18:53:19Z

1

When you use javascript like this, you're typically accessing the id of the element, not the name. Try this instead:

To Check the value:

if(document.getElementById('mybox_id').checked == false){
  // Do Stuff
}

To Assign the value:

document.getElementById('mybox_id').checked = false;

answered Jul 20, 2011 at 18:53

Shawn Steward

6,8353 gold badges29 silver badges46 bronze badges

Comments

binarious · Accepted Answer · 2011-07-20 18:53:45Z

1

Try it with document.getElementById('mybox_id').checked = false!

answered Jul 20, 2011 at 18:53

binarious

4,58828 silver badges35 bronze badges

Comments

Mrchief · Accepted Answer · 2011-07-20 18:54:04Z

1

Try this:

document.getElementById('mybox_id').checked = false;

Will work anywhere (inside or outside of table).

answered Jul 20, 2011 at 18:54

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

Comments

user744186 · Accepted Answer · 2011-07-20 18:54:02Z

0

Just wrap the checkboxes in a form tag,which is wrapped with the table tag.That will fix your problem.

answered Jul 20, 2011 at 18:54

user744186

Collectives™ on Stack Overflow

Setting Checkbox in a Table Using Javascript

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related