check html checkbox using a button

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 an开发者_运维知识库other button, say it has a value of "Ich" then it also checks the check box with the value "Ich"

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.

This example uses a button to toggle the checkbox on/off.

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>

How about a HTML solution.

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

<label> Creates label for the checkbox or radio buttons.

If you are looking for bootstrap solution, I just created this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- Here starts the component -->
      <label class="input-group">
        <span class="input-group-addon">
          <input type="checkbox">
        </span>
        <span class="form-control btn btn-primary">
          Click to toggle checkbox
        </span>
      </label>
      <!-- Here ends the component -->
    </div>
  </div>
</div>