Question

I have checkbox insde a link. In all browsers except Chrome, when clicking on the checkbox you follow the link (instead of just having the checkbox become selected).

How do I avoid this behaviour?

Demo (hover over one of the product images to see the checkbox):

• http://livedemo07571.prestatrend.com/category.php?id_category=9

And here’s the code in question:

<a href="http://livedemo07571.prestatrend.com/product.php?id_product=25" class="product_img_link">
    <img src="http://livedemo07571.prestatrend.com/img/p/25-65-large.jpg" height="469" width="469" alt="Crew Neck Jumper" />

    <span class="new">New</span>

    <div class="right_block large">
        <h3 class="large">Crew Neck Jumper</h3>

        <span class="product_arrow"></span>
        <p class="availability_container"><span class="availability">Available</span></p>

        <span class="slash">&#47;</span>
        <p class="price_container"><span class="price" style="display: inline;">$2,390.00</span></p>

        <p class="compare large"><input type="checkbox" class="comparator" id="comparator_item_25" value="comparator_item_25" /> <label for="comparator_item_25">Select to compare</label></p>
    </div>
</a>

Answer 1

This isn’t valid HTML (see report). The way to avoid this is, quite simply, to include only text or images inside an anchor tag, and move the checkbox outside. You could use some jQuery to add a click event to the box which would navigate to the next page.