Javascript function doesn't work on uncheck the check box

Question

$('#checkboxF1').on('change', function() {
  alert("test");
});

function check_box() {
  document.getElementById("checkboxF1").checked = true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="check_box" onclick="check_box();">check box</button>
<br>
<br>
<input type="checkbox" id="checkboxF1" class="css-checkbox">Test

The onchange function works when checking the checkbox directly but it doesn't work when checking the checkbox through a function, i.e. the function named check_box().

I want to invoke the onchange function when check the checkbox is check through the function check_box().

yea. it too works when i directly click the check box. but it doesn't work when i change the checked state via onclick the button. — Neethu
– Neethu, Commented Dec 31, 2015 at 3:54

jfriend00 · Accepted Answer · 2015-12-31 03:52:47Z

3

This is normal for input tags. When you change the value programmatically, the change event does not fire. That's just how they are designed.

A usual work-around is to either call the change function directly or trigger the change event manually whenever you change the value programmatically.

answered Dec 31, 2015 at 3:52

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

Comments

user2575725 · Accepted Answer · 2015-12-31 04:00:13Z

0

Problem is changing the checkbox state does not fires the event. Try trigger instead.

var chk = $('#checkboxF1');

chk.on('change', function() {
  alert("test");
});

function check_box() {
  chk.trigger('click');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<button id="check_box" onclick="check_box();">check box</button>
<br>
<br>
<input type="checkbox" id="checkboxF1" class="css-checkbox">Test

answered Dec 31, 2015 at 4:00

user2575725

Comments

JitinG · Accepted Answer · 2015-12-31 03:56:47Z

0

try this -

// Create a new 'change' event

var event = new Event('change');

// Dispatch it

element.dispatchEvent(event);

let me know if this helps...

answered Dec 31, 2015 at 3:56

JitinG

11 bronze badge

Comments

Downhillski · Accepted Answer · 2015-12-31 04:05:31Z

0

See code below.

$('#checkboxF1').on('change', function() {
  alert("test");
});

function check_box() {
  // emulate the checkbox.
  var checkboxF1 = document.getElementById("checkboxF1");
  checkboxF1.checked = !checkboxF1.checked;
  // trigger the onChange event.
  $('#checkboxF1').trigger('change');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="check_box" onclick="check_box();">check box</button>
<br>
<br>
<input type="checkbox" id="checkboxF1" class="css-checkbox">Test

answered Dec 31, 2015 at 4:05

Downhillski

2,6552 gold badges30 silver badges40 bronze badges

Comments

Donnie D'Amato · Accepted Answer · 2015-12-31 04:12:56Z

0

Since you're using jQuery, try this:

function check_box(){
    $("#checkboxF1").prop('checked', true);
}

EDIT: I put your function in a snippet, and it works fine too. It checks the box.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
    <head>
        <title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    <body>

    <button id="check_box" onclick="check_box();"> check box </button>
    <br> <br>
    <input type="checkbox" id="checkboxF1" class="css-checkbox"> Test

    <script>
    $('#checkboxF1').on('change', function() {
  alert("test"); 
});

    function check_box(){
        document.getElementById("checkboxF1").checked = true;   
    }

    </script>

    </body>
    </html>

If you are trying to toggle the checkbox with the button. Then do this:

function check_box(){
    $("#checkboxF1").prop('checked', !$("#checkboxF1").prop('checked'));
}

If this isn't it, then I don't understand the question.

EDIT 2: Ok, if the onchange event doesn't fire; try to force it.

$('#checkboxF1').trigger('change');

edited Dec 31, 2015 at 4:12

answered Dec 31, 2015 at 3:51

Donnie D'Amato

3,9701 gold badge20 silver badges42 bronze badges

3 Comments

Neethu Over a year ago

yea. it too works when i directly click the check box. but it doesn't work when i change the checked state via onclick the button.

user1106925 Over a year ago

His problem is not that the box doesn't get checked. Its that the onchange handler doesn't fire.

Donnie D'Amato Over a year ago

Thanks for translating. Made another edit, though I'm not confident in this.

Collectives™ on Stack Overflow

Javascript function doesn't work on uncheck the check box

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related