Why jquery input event does not work on input with type checkbox?

Question

I use jquery input event several times and always everything is OK. but recently I used it for input with type checkbox and ... I don't know why it is not work in many of versions of Chrome and Firefox

As was Wrote here jquery input event on input with type text works correctly but on input with type checkbox does not work.

<input class="form-check-input" type="checkbox" value="" id="sampleCheck1">
<script>
     $("#sampleCheck1").on("input", function(){
          window.alert("checkbox select event fired.")
     })
</script>

// find elements
var checkbox = $("#sampleCheck1")
var textbox = $("#textbox1")


// handle click and add class
checkbox.on("input", function(){
  window.alert("checkbox 'input' event fired.")
})

textbox.on("input", function(){
  window.alert("textbox 'input' event fired.")
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 18px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 340px;
}

.form-check {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 16px;
  color: #fff;
  margin-bottom: 5px;
}

.form-group{
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 16px;
  color: #fff;
  text-align: left;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <p>Test 'select' event for checkbox</p>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="sampleCheck1">
    <label class="form-check-label" for="sampleCheck1">
      Checkbox Sample 
    </label>
</div>
<div class="form-group">
    <label for="textbox1">Textbox Sample</label>
    <input type="text" class="form-control" id="textbox1" >
  </div>
</div>

The checkbox input event looks to be firing properly for me on Chrome, FF, and Opera on W10, as it's supposed to, Under what situations is it not working for you? — CertainPerformance
– CertainPerformance, Commented Aug 19, 2018 at 7:52

T.J. Crowder · Accepted Answer · 2018-08-19 07:58:04Z

2

This is a confirmed bug in Edge. Your checkbox works in Chrome and Firefox (and Opera according to CertainPerformance), but not on Edge (not even if I use addEventListener directly rather than using jQuery), and the specification says the event should fire, so this would be a bug in Edge.

Until they fix the bug (as of 19 August 2018 it is assigned to someone to fix), the usual event to use with checkboxes is click (which fires even when the checkbox is toggled using the keyboard, not mouse).

answered Aug 19, 2018 at 7:58

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

Volodymyr K · Accepted Answer · 2018-08-19 07:55:31Z

1

try this out

<script>
 $("#sampleCheck1").on("change", function(){
      window.alert("checkbox select event fired.")
 })
</script>

answered Aug 19, 2018 at 7:55

Volodymyr K

1,25316 silver badges14 bronze badges

Comments

Nima Boobard · Accepted Answer · 2018-08-19 08:19:28Z

0

The input event seems doesn't fire properly on property change of checkbox on JQuery. It's better to use change event instead.

$(function(){
   $("#sampleCheck1").on("change", function(){
      window.alert("checkbox select event fired.")
   });
});

You can use this event for all types of inputs in html documents.

answered Aug 19, 2018 at 8:19

Nima Boobard

5092 silver badges10 bronze badges

Collectives™ on Stack Overflow

Why jquery input event does not work on input with type checkbox?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related