Extending the clickable area around a checkbox with jQuery

Question

I'm designing a task list that uses the standard, browser-supplied checkboxes. But IMHO the checkbox areas are too small and difficult to click, especially if you're doing semi-power user style clicking of multiple checkboxes (for users who don't know keyboard shortcuts but want to do a lot of archiving, deleting, etc. all at once).

Is there any way to make the area around the checkbox clickable, say an extra 5px of padding around it? I'm using jQuery for my primary client-side code, though I'm not opposed to using plain old JS if it makes better sense.

Oh, and I'm not really looking for a plugin. Something lightweight is in order here.

Cheers in advance!

score 6 · Answer 1 · answered Aug 31 '16 at 13:20

Works in chrome as of 2016:

<style>
.cb{
    position: relative;
    margin:0;
}
.cb:before {
    content:'';
    position: absolute;
    top:-10px;
    bottom:-10px;
    left:-10px;
    right:-10px;
}
</style>

<input type="checkbox" class="cb" />

score 5 · Answer 2 · answered Sep 16 '13 at 04:35

5

It's an old post but I just tried to do the same thing and padding / sizing didn't make a difference to the "hit" area. I used jQuery on the container that holds the checkbox (in this case a td as I have a grid of them, but divs should work):

html

<td class="expandCheck">
  <input type="checkbox" name="cfg[][]">
</td>

js

$(".expandCheck").on('click', function (e) {
    cb = $(e.target).children(":checkbox");
    cb.attr("checked", !cb.attr("checked"));
});

answered Sep 16 '13 at 04:35

thinkOfaNumber

2,581
3
27
46

1

I would recommend using the wrapping label approach instead. But if you do use jQuery then do note that attr() was deprecated in jQuery 1.6 and now prop() should be used instead. Example of prop(): http://jsfiddle.net/eukmxqxe/3/ – Jaran Aug 20 '14 at 07:57

Ben · Answer 3 · 2014-03-11T09:03:13.483

3

When creating clickable image labels that work in IE8, I styled the label's margin and padding to cover the area around the checkbox I wanted to be clickable. The effect is one big clickable area covering label, checkbox, and some extra whitespace.

label {
    margin-left: -23px;
    padding-left: 28px;
}

The margin moves it way over to the left, and the padding pushes the label text back to where it should be.

jsfiddle of this method: http://jsfiddle.net/wydKV/

edited Mar 11 '14 at 09:03

answered Apr 30 '12 at 12:35

Ben

2,143
2
19
27

2

I created a different version based on your jsfiddle. My version just puts the checkbox inside the label, so you can add padding, but you don't have to do the sneaky margin+padding. Tested in Chrome 33, IE 10, and FF 27; worked in all three. http://jsfiddle.net/8KHy7/2/ – Rebecca Campbell Mar 10 '14 at 23:55
Ahh, right you are! The margin+padding method must have been a workaround for having clickable image labels in IE8. – Ben Mar 12 '14 at 08:12
Isn't this the best solution, regardless of IE8? In general: wrap the input inside the label and use padding to enlarge the area? – Ideogram May 13 '15 at 09:12

score 3 · Answer 4 · answered Mar 06 '14 at 21:29

This is the best solution, i used it and works perfectly: Click here http://schoberg.net/2008/10/making-better-forms-clickable-text-for-radio-button-and-checkbox-fields/

or simply use this HTML code for radio buttons or checkboxes:

CHECKBOX:

<label for="RememberMe">
<input type="checkbox" name="RememberMe" id="RememberMe" value="yes" />
Remember me on this computer.
</label>

RADIO BUTTONS:

<label for="goodIdea">
<input type="radio" name="idea" id="goodIdea" value="good" />
Good Idea
</label>
<br />
<label for="badIdea">
<input type="radio" name="idea" id="badIdea" value="bad" />
Bad Idea
</label>

score 3 · Answer 5 · answered Nov 08 '10 at 10:17

3

Can you use a label associated with the checkbox? Then clicking the label itself will check / uncheck the box.

answered Nov 08 '10 at 10:17

Karl Gohery

124
1
6

Would you mind sharing an example? Still new enough to jQuery to warrant it. – Josh Smith Nov 08 '10 at 10:30
@Josh: An label is a HTML tag, used in conjunction with inputs. Have a squizz here: http://www.w3schools.com/tags/tag_label.asp – Alastair Pitts Nov 08 '10 at 10:33
Yep - as Alastair said it's just a HTML tag. Just be sure to set the "for" attribute to the ID of your checkbox. Not sure what server site language you are using, but if you're using .net be sure to use the .net label rather than the standard html one as .net changes the id of the control and it can mess with your checkbox / label relationship. – Karl Gohery Nov 08 '10 at 10:41
Ah, in that case, using a label would not exactly be the desired result. The problem with that approach is that I'd like the label area (the task itself) to be clickable. In terms of UI, think Gmail. – Josh Smith Nov 08 '10 at 10:47

score 1 · Answer 6 · edited May 23 '17 at 10:30

You might run into cross-browser issues if you try to solve this with CSS, for reasons explained here. However, you don't really need to use javascript either.

Alin's answer of surrounding the checkbox with a label is the best approach. It is valid HTML and you can also leave the actual label text out if you're using a table column to represent selected row for example.

Working JSFiddle example.

<style>
  td label {
    display: table-cell;
    vertical-align: middle;
    border: solid black 1px;
    width: 40px;
    height: 40px;
    text-align: center;
  } 
</style>

<table>
  <tr>
    <td>
      <label for="item1">
          <input type="checkbox" id="item1" name="item[]" value="item2" />
      </label>
    </td>
  </tr>
</table>

score 1 · Answer 7 · answered Nov 08 '10 at 10:24

I tend to agree with Karl Gohery - for this kind of thing, labels are the default option in forms to be used... not only for visual purpose but from accessibility point of view as well - a well designed form should contain fieldset, legend and labels to support WAI standards

Extending the clickable area around a checkbox with jQuery

7 Answers7