How can I create 6 checkboxes that will look like this? I know how to hide the check box, but how can I make is so I can click the text?
<tr>
<td class = "first">Select Folder(s)</td>
<td class = "second">
<input id="hw" type="checkbox">hw1
<input id="hw" type="checkbox">hw2
<input id="hw" type="checkbox">hw3
<input id="hw" type="checkbox">hw4
<input id="hw" type="checkbox">hw5
<input id="hw" type="checkbox">hw6
</td>
It should be like this:
Select Foler | (hw1) (hw2) .....
and the hw checkboxes should be clickable, and I need to be able to select more than one.
I think you want the <label> HTML tag. You specify the <label then for=" then the id of the element that you want to attach it to (a radio or checkbox). In the end, it should look something like this:
<label for="hw">text that they can click on goes here</label>
As stated by @tieTYT in the comments, an alternative way to do this would be to wrap the <label> tag around the radio or checkbox element like this:
<label><input type="radio"/>Text for the label here</label>
Note: You may still need to add the for= attribute for old and buggy IE browsers.
Here's your final code (I added the CSS property cursor:pointer; to the <label>s):
label {
cursor: pointer;
}
input[type=checkbox] {
cursor: pointer;
}
<tr>
<td class="first">Select Folder(s)</td>
<td class="second">
<input id="hw" type="checkbox">
<label for="hw">hw1</label>
<input id="hw2" type="checkbox">
<label for="hw2">hw2</label>
<input id="hw3" type="checkbox">
<label for="hw3">hw3</label>
<input id="hw4" type="checkbox">
<label for="hw4">hw4</label>
<input id="hw5" type="checkbox">
<label for="hw5">hw5</label>
<input id="hw6" type="checkbox">
<label for="hw6">hw6</label>
</td>
Hope that helps!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With