I have the following setup (simplified), inside the label I have some images, which activate JavaScript functions, is there a way to ignore the click on the label if the user clicks on one of these images?

<input type="checkbox" id="i_87" name="image[]" />
<label for="i_87" style="width:500px;height:500px;background-image:url('image.jpg');">
    <img src="bt1.jpg" onClick="somefun1()" />
    <img src="bt2.jpg" onClick="somefun2()" />
</label>

Just to clarify, I don't want it to check the checkbox when the images are clicked, but it SHOULD check the checkbox when anywhere else is clicked!

I have the following setup (simplified), inside the label I have some images, which activate JavaScript functions, is there a way to ignore the click on the label if the user clicks on one of these images?

<input type="checkbox" id="i_87" name="image[]" />
<label for="i_87" style="width:500px;height:500px;background-image:url('image.jpg');">
    <img src="bt1.jpg" onClick="somefun1()" />
    <img src="bt2.jpg" onClick="somefun2()" />
</label>

Just to clarify, I don't want it to check the checkbox when the images are clicked, but it SHOULD check the checkbox when anywhere else is clicked!

• javascript
• html

• 2 Remove for attribute from label :) – Morpheus Commented Feb 7, 2014 at 16:49
• 1 Why are you using a label if you don't want the default behaviour of a label? – adeneo Commented Feb 7, 2014 at 16:52
• NEVER remove the for attribute from a label. :P But, could you move the buttons outside of the label? – talemyn Commented Feb 7, 2014 at 16:52
• 1 @Morpheus - Accessibility is the main reason. Plus, the whole point of the label is that it ties the text to the form field programmatically . . . if you don't want the text tied to the field, use a div or a span, instead of a label. – talemyn Commented Feb 7, 2014 at 16:55
• See updated post sorry – Martyn Ball Commented Feb 7, 2014 at 16:56

4 Answers 4

You must prevent the default action. The easiest way is to return false from your functions. Here is an example, bypassing your function (just return false from them and you should get the same behavior). Tested in Chrome, but it's a pretty standard practice.

<input type="checkbox" id="i_87" name="image[]" />
<label for="i_87" style="width:500px;height:500px;background-image:url('image.jpg');">
    <img src="bt1.jpg" onclick="return false;" />
    <img src="bt2.jpg" onclick="return false;" />
</label>

This has nothing to do with CSS. In order to stop the label from checking the related checkbox, you will either have to remove the for="i_87" attribute, or use Javascript to stop the event from performing its default action.

In jQuery, that would be something like this:

$("label").on("click",function(evt) {
     evt.preventDefault();
});

This should theoretically then allow the click event to pass on to your images but cancel the label's default action.

Remove the for="i_87" from the label.

Throwing this out there as a possibility . . . could you just move the buttons outside of the label?

<input type="checkbox" id="i_87" name="image[]" />
<label for="i_87" style="width:500px;height:500px;background-image:url('image.jpg');" />
<img src="bt1.jpg" onClick="somefun1()" />
<img src="bt2.jpg" onClick="somefun2()" />

It would probably take a little tweaking to get it to look the same, but it would make a whole lot more sense than putting the buttons into the label and then suppressing the default behavior of the label, but only for those buttons.