CODEWITHSUNDEEP
jqueryhtmlcheckbox
Mikkel Fennefoss
Mikkel Fennefoss

Reputation: 911

Why does click for toggle checkbox become a double click?

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.

Upvotes: 1

Views: 3892

Answers (4)

John R
John R

Reputation: 2791

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>

Upvotes: 1

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

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>

Upvotes: 2

Gvidas
Gvidas

Reputation: 1964

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

Upvotes: 1

miguelmpn
miguelmpn

Reputation: 2037

You just need to preventDefault()

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

Upvotes: 1

Related Questions