Check html with a button

Question

I'm struggling to find a solution for this anywhere on Google, maybe I searched the wrong way, but thought I'd come and ask all the trustworthy StackOverflow members.

I want to use the html button to check the html checkbox. The reason I don’t want to use this checkbox will be for accessibility reasons only, because the application I'm developing will be on the terminal and used like a touch screen, so the HTML checkbox is too small.

The only problem is that the checklist is dynamic as it is populated using an SQL query. Obviously, however, I can do the same for creating HTML buttons.

I assume that this will require JavaScript (which I’m very happy using now, since I need to find many functions that I need, I need JavaScript for this application) to execute this function.

So, to clarify: I want to click on the button, say that it has the value "Fin Rot" and checks the checkbox with the value "Fin Rot". And then if I press another button, I say that it has the value "Ich", then it also checks the flag with the value "Ich"

Answer 1

While you can use the button and JavaScript to do this, can I suggest a much simpler approach? Just use the <label> , which is just for that, and create it as 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 do not 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 using CSS you can hide the check box if necessary, but you can either click to switch the check box.

You can test the demo here , also showing some CSS CSS buttons on the shortcut, if necessary.

Answer 2

This example uses a button to enable / disable the check box.

http://jsfiddle.net/DnEL3/

 <input type="checkbox" id="finRot" name="something" value="Fin Rot"> <button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button> 

Answer 3

How about an HTML solution.

  <p><input type="checkbox" value="Another check box" name="cboxwithlabel" id="idbox"><label for="idbox">Another checkbox</label></p> 

<label> Creates a label for a check box or radio buttons.