How to set checkbox checked and unchecked event using JQUERY

Question

I want to Prompt Yes message if Checkbox is checked. And want to Prompt No message if checkbox is Unchecked.

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/titatoggle/1.2.11/titatoggle-dist.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="dist/css/bootstrap-select.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="dist/js/bootstrap-select.js"></script> 
<script  src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
  <div class="... checkbox-slider--b-flat checkbox-slider-md col-md-4" style="margin-top: 22px;     margin-left: 53px;" id="with_answer">
    <label>
   <input type="checkbox"><span>Answer</span>
 </label>
  </div>
</body>
</html>

has good examples: [http://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery](http://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery) — dpp, Dec 06 '16 at 15:37

score 1 · Answer 1 · answered Dec 06 '16 at 15:35

1

You are after the change event. Bind a listener to the change event and then you can check the this.checked to see if it is true/false to perform your desired logic.

answered Dec 06 '16 at 15:35

Taplar

24,788
4
22
35

Saumya Rastogi · Accepted Answer · 2016-12-06T16:04:56.393

You can use jQuery's change event, you can do it like this:

$(function() {
 $('.checkbox').on('change', function(e) {

  if($(this).is(':checked')) {
    alert('Yes')
   } else {
    alert('No')
   }
 });
});

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

  <input class="checkbox" type='checkbox'> Checkbox

</div>

For your code, the code should go like this:

$(function() {
  
  $('.myCheckbox').on('change', function(e) {
    if($(this).is(":checked")) {
      alert('checked');
    } else {
      alert('unchecked');
    }
    
  });
  
});

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/titatoggle/1.2.11/titatoggle-dist.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="dist/css/bootstrap-select.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="dist/js/bootstrap-select.js"></script> 
<script  src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
  <div class="... checkbox-slider--b-flat checkbox-slider-md col-md-4" style="margin-top: 22px;     margin-left: 53px;" id="with_answer">
    <label>
   <input class="myCheckbox" type="checkbox"><span>Answer</span>
 </label>
  </div>
</body>
</html>

Hope this helps!

$(this).is(':checked') is just adding overhead when this.checked is already what you are after. — Taplar, Dec 06 '16 at 15:38
Thanks @Taplar This is Exactly i want to say but can you please do this for the Ti-Ta Toggle button which is used in given code by me.. — Muhammad Haris, Dec 06 '16 at 15:54
@MuhammadHaris - I've added the code for your problem, hope this helps! — Saumya Rastogi, Dec 06 '16 at 16:05

How to set checkbox checked and unchecked event using JQUERY

2 Answers2