CODEWITHSUNDEEP
jqueryhtmlwordpresscheckbox
Prakash Ash
Prakash Ash

Reputation: 151

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

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

Upvotes: 0

Views: 1622

Answers (7)

Amit Sharma
Amit Sharma

Reputation: 43

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>

Upvotes: 0

Krzysztof Janiszewski
Krzysztof Janiszewski

Reputation: 3834

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>

Upvotes: 0

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

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>

Upvotes: 1

Shahzad Mukhtar
Shahzad Mukhtar

Reputation: 58

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>

Upvotes: 0

Oli
Oli

Reputation: 872

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.

Upvotes: 0

treyBake
treyBake

Reputation: 6560

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

Upvotes: 0

Vel
Vel

Reputation: 9341

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>

Upvotes: 0

Related Questions