javascript-trigger function 2 times when onclick check box

Question

HTML Code :

<div id="txtAge">
    <table>
    <tr>
    <td><input type="checkbox" onclick="checking()" id="ch1" value="1"><td>
    <td><input type="checkbox" onclick="checking()" id="ch2" value="10"><td>
    <td><input type="checkbox" onclick="checking()" id="ch3" value="12"><td>
    <td><input type="checkbox" onclick="checking()" id="ch4" value="3"><td>
    </tr>
    <tr>
    <td><input type="checkbox" onclick="checking()" id="ch5" value="221"><td>
    <td><input type="checkbox" onclick="checking()" id="ch6" value="130"><td>
    <td><input type="checkbox" onclick="checking()" id="ch7" value="132"><td>
    <td><input type="checkbox" onclick="checking()" id="ch8" value="3333"><td>
    </tr>
    </table>

    </div>

Javascript :

function checking(){
$('input[type="checkbox"]').on('change', function() {
            $(this).closest('tr').find('input').not(this).prop('checked', true);
            alert(this.value);
        });
}

This is my code. when i click the checkbox it alert one times, when i click other checkbox it alert 2 times.Why the onclick function trigger more than 1 time when i continue clicking the checkbox?

Here the demo:

http://jsfiddle.net/L9z9t04p/11/

@RayonDabre As I said to gurvinder372, in this case the function wouldn't be called at all as jQuery binder is placed inside that function, ... So this is not a full answer! — neoselcev
– neoselcev, Commented Dec 17, 2015 at 7:54
i dun know why your code does not work for me..actually the table is created by javascript after successful ajax call.. — max cheng
– max cheng, Commented Dec 17, 2015 at 8:13

gurvinder372 · Accepted Answer · 2015-12-17 08:23:02Z

3

Remove the onclick="checking" as an inline attribute from the checkbox.

Both are going to run independently and you can add as many event listeners to an element as you want, so one will not automatically remove the other.

Also remove this checking method too, you can directly bind jquery.on event

       $('input[type="checkbox"]').on('change', function() {
            $(this).closest('tr').find('input').not(this).prop('checked', true);
            alert(this.value);
        });

or if you don't want to remove checking method and will call it on some condition then you need to ensure that checking method is invoked

function checking(){
$('input[type="checkbox"]').off('change' ); //if the checking() is called multiple times
$('input[type="checkbox"]').on('change', function() {
            $(this).closest('tr').find('input').not(this).prop('checked', true);
            alert(this.value);
        });
}
checking();

edited Dec 17, 2015 at 8:23

answered Dec 17, 2015 at 7:41

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

5 Comments

neoselcev Over a year ago

This is not the full answer. He has his jQuery binder inside function, which wouldn't be called in case he'll remove that attribute.

gurvinder372 Over a year ago

@max-cheng I have updated the answer to address the concern raised in comments.

max cheng Over a year ago

@ gurvinder372 it will checked all the checkbox instead of one.jsfiddle.net/L9z9t04p/18

gurvinder372 Over a year ago

@maxcheng what should it do then instead?

max cheng Over a year ago

@ gurvinder372 my intention is one row only one checkbox is checked.

Lucas Rodriguez · Accepted Answer · 2015-12-17 07:45:44Z

1

Whether you bind the event through a listener:

 $('input[type="checkbox"]').on('change', function() {

Or you do inline binding to a function:

<td><input type="checkbox" onclick="checking()" id="ch2" value="10"><td>

Don't perform both. What's happening is that, everytime you click on the checkbox, you are registering the function one more time to the event. So every click will alert one more time that the last time

answered Dec 17, 2015 at 7:45

Lucas Rodriguez

1,2036 silver badges15 bronze badges

Comments

Satpal · Accepted Answer · 2015-12-17 08:06:46Z

1

The problem arise from the fact that you are binding change event handler on every inline change event handler. this will keep on adding an event handler and you will keep on getting multiple alerts in this case.

Remove the inline change event handler from your check box. As you are already binding it using jQuery.

HTML

<input type="checkbox" id="ch5" value="221">

Script

$(document).ready(function(){
    $('input[type="checkbox"]').on('change', function() {
        $(this).closest('tr').find('input').not(this).prop('checked', true);
        alert(this.value);
    });
});

edited Dec 17, 2015 at 8:06

answered Dec 17, 2015 at 7:45

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Muhammad Atif · Accepted Answer · 2015-12-17 07:45:31Z

0

remove onclick="checking()" from html and bind change event for check box only once

answered Dec 17, 2015 at 7:45

Muhammad Atif

1,1221 gold badge10 silver badges22 bronze badges

Comments

neoselcev · Accepted Answer · 2015-12-17 07:58:08Z

0

For each time you trigger the function checking, you're adding an event to all checkboxes. It will accumulate for each time you click. I tried this in your fiddle and it works:

$(document).ready(function() {
  $('input[type="checkbox"]').on('change', function() {
    $(this).closest('tr').find('input').not(this).prop('checked', false);
    alert(this.value);
  });
});

Also, remove the onclick call on your checkboxes.

edited Dec 17, 2015 at 7:58

neoselcev

1381 silver badge12 bronze badges

answered Dec 17, 2015 at 7:44

Coss

4531 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

javascript-trigger function 2 times when onclick check box

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related