checkbox click event fired twice for class name vs once for id (jquery)

Question

I have the following piece of code running in a snippets plugin in wordpress.

Jquery:

<script>
    jQuery(document).ready(function(event)
    {
        jQuery(".checkbox").click(function()
        {
            if(jQuery(this).is(":checked"))
                alert('checked');
            else
                alert('unchecked ');
        });
    });
</script>

HTML:

<div class="checkbox">
      <h2>
          <label>
              <input type="checkbox" class="checkbox" value="">
              Ignore Registration
          </label>
      </h2>
</div>

When the checkbox is checked, i received two alerts (checked, followed by unchecked).

When the checkbox is unchecked, i received two alerts as well (unchecked, and unchecked).

I'm not sure why this is happening, but when i changed the input tag to use the id instead of class, the solution works perfectly.

jQuery("#checkbox").click ..........

<input type="checkbox" id="checkbox"..........

Am just trying to find out whats happening, or the difference in using classes and ids for the click event

You got your answers but a hint: it’s a good convention to prefix classnames that are used for javascript interactions with ’js-’. So giving the input the class ’js-checkbox’ would make it clearer to see what the class is meant for. — Luckyfella
– Luckyfella, Commented Apr 27, 2018 at 7:58
yup, agreed, point noted, will stick to some form of convention to prevent this in future, thanks — Prakash Ash
– Prakash Ash, Commented Apr 27, 2018 at 8:11

Death-is-the-real-truth · Accepted Answer · 2018-04-27 07:55:48Z

1

Issue:- Since div and checkbox both share same class, that's why event trigger two times (clicking on checkbox trigger event on checkbox as well as on div both due to the same class)

So change the classes and you will good to go

Working snippet:-

jQuery( document ).ready(function(event) {

  jQuery(".checkbox").click(function() {

    if(jQuery(this).is(":checked"))
      alert('checked');

    else
      alert('unchecked ');


  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h2><label><input type="checkbox" class="checkbox" value="">Ignore
  Registration</label></h2>
</div>

edited Apr 27, 2018 at 7:55

answered Apr 27, 2018 at 7:48

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vel · Accepted Answer · 2018-04-27 07:46:27Z

0

your div class and checkbox class are same. change the div class name.

 <div class="checkbox1">
  <h2><label><input type="checkbox" class="checkbox" value="">Ignore Registration</label></h2>
</div>

otherwise change in click selector

<script>
jQuery( document ).ready(function(event) {

    jQuery(".checkbox input[type=checkbox]").click(function() {

        if(jQuery(this).is(":checked"))
            alert('checked');

        else
            alert('unchecked ');

    });

});
</script>

answered Apr 27, 2018 at 7:46

Vel

9,4286 gold badges42 silver badges71 bronze badges

Comments

treyBake · Accepted Answer · 2018-04-27 07:47:32Z

0

It's because you have two DOM elements with the class: checkbox. So your div when clicked will run the function, and your input will run the function when clicked (I'm assuming you're clicking the input which causes the function to run twice). You need to separate your HTML better, recommended is:

<div class="checkbox-container">
    <label>Ignore Registration</label>
    <input type="checkbox" class="checkbox" value="">
</div

answered Apr 27, 2018 at 7:47

treyBake

6,5698 gold badges28 silver badges64 bronze badges

Comments

Oli · Accepted Answer · 2018-04-27 07:50:38Z

0

It is because both the div and the input have the class of checkbox. So when targeting this class, it is actually running against both elements.

The div is always returns unchecked, and the checkbox will return checked or unchecked respectively.

Change the class of the div, or change your JS to target $(input.checkbox) if you want to stick with the existing classnames.

answered Apr 27, 2018 at 7:50

Oli

8727 silver badges13 bronze badges

Comments

Shahzad Mukhtar · Accepted Answer · 2018-04-27 07:54:44Z

0

Try this code

    <script src="https://code.jquery.com/jquery.js"></script>
        <script type="text/javascript">
    $(function () {
            $("#checkbox").click(function () {
                if ($(this).is(":checked")) {

                    if(jQuery(this).is(":checked"))
                        alert('checked');
  } else {
                   alert('unchecked ');
}
            });
        }); 

        </script>


        <form>

        <div class="checkbox">
          <h2><label><input type="checkbox" class="checkbox" id ="checkbox" value="">Ignore Registration</label></h2>
    </div>
        </form>

answered Apr 27, 2018 at 7:54

Shahzad Mukhtar

587 bronze badges

1 Comment

treyBake Over a year ago

you should always add an explanation, this only leads to a copy-and-paste generation of developer :)

Krzysztof Janiszewski · Accepted Answer · 2018-04-27 08:08:15Z

0

I is because you have two elements with class checkbox. Change class in div surrounding your checkbox and it works properly.

$(document).ready(function(event) {

  $(".checkbox").click(function() {

    if ($(this).is(":checked")) {
      alert('checked');
    } else {
      alert('unchecked ');
    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkboxContainer">
  <h2><label for="checkboxId">Ignore Registration</label>
    <input id="checkboxId" type="checkbox" class="checkbox" value=""></h2>
</div>

answered Apr 27, 2018 at 8:08

Krzysztof Janiszewski

3,8293 gold badges21 silver badges38 bronze badges

Comments

Amit Sharma · Accepted Answer · 2018-04-27 08:09:12Z

Can you please change the class name, In the below code there are 2 class is used with same name 1. div class :checkbox 2 is input class : checkbox, please change the div class name, then you get only 1 alert, You can add input in jQuery click functional as well

jQuery("input.checkbox").click(function(e) {

<div class="checkbox">
  <h2><label><input type="checkbox" class="checkbox" value="">Ignore Registration</label></h2>

Solution 1 :

<script>
jQuery( document ).ready(function(event) {
    jQuery("input.checkbox").click(function() {
            if(jQuery(this).is(":checked"))
                alert('checked');

            else
                alert('unchecked ');


    });

});
</script>
<div class="checkbox">
<h2><label><input type="checkbox" class="checkbox" value="">Ignore 
Registration</label></h2>
 </div>

Solution 2 :

<script>
jQuery( document ).ready(function(event) {

    jQuery(".checkbox").click(function() {

            if(jQuery(this).is(":checked"))
                alert('checked');

            else
                alert('unchecked ');


    });

});

</script>
<div class="checkbox1">
  <h2><label><input type="checkbox" class="checkbox" value="">Ignore Registration</label></h2>
</div>

Collectives™ on Stack Overflow

checkbox click event fired twice for class name vs once for id (jquery)

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related