Question

27

Click on a div to toggle a checkbox inside of it using javascript

rated 0 times [ 33] [ 6] / answers: 1 / hits: 46554 / 15 Years ago, wed, february 25, 2009, 12:00:00

This seems to be a simple problem, but I dont use alot of javascript.

I have a div, with a checkbox in it, and would like the whole div to toggle the checkbox. This is what I have so far:

<div style=padding: 2em; border: 1px solid

     onClick=if (document.getElementById('cb').checked) document.getElementById('cb').checked=false; else document.getElementById('cb').checked=true;>

  <input name=cb id=cb type=checkbox>

</div>

Only problem is when you click the actual checkbox, it get toggled twice, and therefore doesn't change.

Any ideas?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sabinal

Add To Favorites

Follow

Total Points: 144

Total Questions: 112

Total Answers: 107

Location: Ghana

Member since Mon, Aug 22, 2022

1 Year ago

sabinal questions

1 Custom onChange for React Hook Form and watch()

Mon, Jul 19, 21, 00:00, 2 Years ago

1 Vue: vue-i18n: Cannot translate the value of keypath, Use the value of keypath as default

Fri, Mar 5, 21, 00:00, 3 Years ago

1 How to Install and Use V-Calendar (vue.js)?

Sun, Dec 13, 20, 00:00, 3 Years ago

1 Using Webpack to turn TypeScript into es5

Sun, Oct 25, 20, 00:00, 3 Years ago

1 How fix this warrning warning Array.prototype.map() expects a return value from arrow function array-callback-return?

Sat, Oct 24, 20, 00:00, 3 Years ago

View All

answered 15 Years ago rebekahalysah · Accepted Answer

It's possible you could implement this in a more robust and accessible way by using the label element to wrap the area you want to click.

For example:

<label for=cb>

    <div style=padding: 2em; border: 1px solid>

        <input name=cb id=cb type=checkbox>

    </div>

</label>

I haven't tested the above code, but I believe all browsers support clicking of labels to check an input box.