get value of a checked bootstrap checkbox

Question

I have this HTML form:

<div class="animated-switch">
  <input id="switch-success" name="switch-success" checked="" type="checkbox">
  <label for="switch-success" class="label-success"></label>
</div>  

How i can know if the input is checked or not ?

I tried like this but nothing alerted:

$(document).on('click','.animated-switch',function(e){
    alert($('#switch-success:checked').val() );
});

Here a JSFIDDLE file in order to see my clear example: https://jsfiddle.net/s2f9q3fv/

Answer 1

Your code works fine in the snippet. You have forgotten to add value to your checkbox, but even without it you should be able to see the alert message with undefined value (see below the value 'test' was added in the snippet).

$(document).on('click','#switch-success:checked',function(e){
    alert($('#switch-success:checked').val() );
});

.animated-switch > input[type="checkbox"] {
  display: none; }

.animated-switch > label {
  cursor: pointer;
  height: 0px;
  position: relative;
  width: 40px; }

.animated-switch > label::before {
  background: black;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  content: '';
  height: 16px;
  margin-top: -8px;
  position: absolute;
  opacity: 0.3;
  transition: all 0.4s ease-in-out;
  width: 40px; }

.animated-switch > label::after {
  background: white;
  border-radius: 16px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  content: '';
  height: 24px;
  left: -4px;
  margin-top: -8px;
  position: absolute;
  top: -4px;
  transition: all 0.3s ease-in-out;
  width: 24px; }

.animated-switch > input[type="checkbox"]:checked + label::before {
  background: inherit;
  opacity: 0.5; }

.animated-switch > input[type="checkbox"]:checked + label::after {
  background: inherit;
  left: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="animated-switch">
  <input id="switch-success" name="switch-success" checked="" value="test" type="checkbox">
  <label for="switch-success" class="label-success"></label>
</div>

UPDATE: You should bind the click event on the checkbox itself, not the parent. Try the snipped again with the fancy animation. Notice if you want the alert always to be executed you have to remove the :checked attribute in the selector.