Why does click for toggle checkbox become a double click?

Question

I am currently making a checkbox with a label attached to it. I use the for attribute to link the click for the checkbox.

I also have a jQuery function which onclick for the checkbox and labels container does a slide toggle for a text input field.

When I click the checkbox, only one click is detected and the text field slides down nicely. However, when I click the label it seems that a double click is happening so the text field slides down and then immediately back up.

I have an ID of toggle-checkbox on my checkbox and a for="toggle-checkbox" on my label and I suspect that somehow triggers an extra click.

HTML:

<div class="cart-summary__coupon-code">
  <div class="form-group js-coupon-code">
    <input class="cart-summary__coupon-code__checkbox" type="checkbox" id="toggle-checkbox">
    <label class="cart-summary__coupon-code__label form-group__label--block" for="toggle-checkbox">click me</label>
  </div>
</div>

<div class="coupon-code">
  <input type="text" />
</div>

JavaScript:

jQuery('.js-coupon-code').click(function() {
    $( ".coupon-code" ).slideToggle( "slow", function() {
    });
});

CSS:

.coupon-code {
  display: none;
}

I have created a codepen where the issue can be reproduced.

Check this question: http://stackoverflow.com/a/13756844/3582159 (Duplicate?) — GlabbichRulz, Feb 02 '16 at 09:53

score 2 · Accepted Answer · answered Feb 02 '16 at 09:54

As you are using for="toggle-checkbox" in the label when you click label it also fire click on the checkbox. So the click event of the parent fires twice for event bubbling. Use click event for the checkbox instead of .js-coupon-code.

jQuery('#toggle-checkbox').click(function() {
    $(".coupon-code").slideToggle("slow", function() {});
});

.coupon-code {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart-summary__coupon-code">
  <div class="form-group js-coupon-code">
    <input class="cart-summary__coupon-code__checkbox" type="checkbox" id="toggle-checkbox">
    <label class="cart-summary__coupon-code__label form-group__label--block" for="toggle-checkbox">click me</label>
  </div>
</div>

<div class="coupon-code">
  <input type="text" />
</div>

score 1 · Answer 2 · answered Feb 02 '16 at 09:48

1

You just need to preventDefault()

//toggle promo code input field
jQuery('.js-coupon-code').click(function(e) {
  e.preventDefault();
    $( ".coupon-code" ).slideToggle( "slow", function() {
    });
});

answered Feb 02 '16 at 09:48

miguelmpn

1,859
1
19
25

score 1 · Answer 3 · answered Feb 02 '16 at 09:53

1

I suggest to change event from click to checkbox change.

jQuery('.cart-summary__coupon-code__checkbox').change(function() {
    $( ".coupon-code" ).slideToggle( "slow", function() {
    });
});

Here's fixed codePen

answered Feb 02 '16 at 09:53

Gvidas

1,964
2
14
21

score 1 · Answer 4 · answered Feb 02 '16 at 09:55

Simply you can bind click event for input#toggle-checkbox. It will be applicable for its corresponding label too.

Note: Why I am telling this, in your sample you just try to click between the checkbox and label, your toggle operation will occur.

Check this example:

jQuery('#toggle-checkbox').click(function() {
  $(".coupon-code").slideToggle("slow", function() {});
});

.coupon-code {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="cart-summary__coupon-code">
  <div class="form-group js-coupon-code">
    <input class="cart-summary__coupon-code__checkbox" type="checkbox" id="toggle-checkbox">
    <label class="cart-summary__coupon-code__label form-group__label--block" for="toggle-checkbox">click me</label>
  </div>
</div>

<div class="coupon-code">
  <input type="text" />
</div>

Why does click for toggle checkbox become a double click?

4 Answers4