Question

107

check html checkbox using a button

rated 0 times [ 112] [ 5] / answers: 1 / hits: 31811 / 14 Years ago, sun, january 9, 2011, 12:00:00

I'm struggling to find a solution for this anywhere on Google, maybe i'm searching incorrectly but thought I would come and ask the ever trustworthy members of StackOverflow.

I'm wanting to use an html button to check an html check box. There reason I don't want to use the check box will be purely for accessibility reasons because the application i'm developing will be on a terminal and used as via a touch-screen so an HTML check box is too small.

The only issue is that the list of check box's is dynamic as it is populated using an SQL query. Obviously however I can do the same for creating HTML buttons.

Im guessing it will require JavaScript (which I'm perfectly happy using now as I'm finding a lot of the functionality I need in this application needs JavaScript) to do this functionality.

So to clarify: I want to click on a button, say it has a value of Fin Rot and that checks the check box with the value Fin Rot. And then if I clicked another button, say it has a value of Ich then it also checks the check box with the value Ich

Answers

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

gleng

Add To Favorites

Follow

Total Points: 471

Total Questions: 107

Total Answers: 102

Location: Virgin Islands (U.S.)

Member since Fri, May 7, 2021

3 Years ago

answered 14 Years ago makaylahk · Accepted Answer

While you can use a button and JavaScript for this, might I suggest a much simpler approach? Just use a <label> that's designed just for this, and style it like a button, for example:

<input type=checkbox id=finRot name=something value=Fin Rot>

<label for=finRot>Some text here, could be Fin Rot</label>

or (if you don't want to use id on checkbox and for on label):

<label>

    <input type=checkbox name=something value=Fin Rot>

    Some text here, could be Fin Rot

</label>

....then with CSS you can hide the checkbox if needed, but either are clickable to toggle the checkbox.

You can test out a demo here, also showing some button-ish CSS on the label if needed.