Label for="" isn't checking on click

Question

This is my markup:

<nav>
    <input type="radio" name="promoNav" id="promo-nav-1">
    <input type="radio" name="promoNav" id="promo-nav-2">
    <input type="radio" name="promoNav" id="promo-nav-3">
    <input type="radio" name="promoNav" id="promo-nav-4">
</nav>

<ul class="items container">
        <li>
            <label for="promo-nav-1">
                <strong>Item 1</strong>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </label>
        </li>
        <li>
            <label for="promo-nav-2">
                <strong>Item 2</strong>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                testing
            </label>
        </li>
        <li>
            <label for="promo-nav-3">
                <strong>Item 3</strong>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </label>
        </li>
        <li>
            <label for="promo-nav-4">
                <strong>Item 4</strong>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </label>
        </li>
</ul>

For some reason, when the label is clicked, the browser will focus on the correct radio, but will not check it. Am I missing something?

This plunkr shows it working: http://plnkr.co/edit/hVh3d3RvfZtmL4pFRNAZ, are you sure it isn't some code you have elsewhere that is the problem? — Kevin F, Jun 03 '15 at 16:10
Works fine in [this fiddle](http://jsfiddle.net/n5d80dd4/) which is an exact copy of your example.. have you changed anything to make your example simpler? Perhaps you've removed whatever was causing the problem? — Alex McMillan, Jun 03 '15 at 16:12
looks like it's a problem with slick.js... trying to figure out what's causing it. — Aaron Benjamin, Jun 03 '15 at 16:12

Label for="" isn't checking on click

0 Answers0