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

如果选中该复选框，则会得到。

       $('#' + id).is(":checked")

Answer 2

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.

Answer 3

Try this

$(".animated-switch").change(function () {
    alert($('#switch-success:checked').val() );
    });

Answer 4

I still had problems and came up with a workaround:

<input class="form-check-input" type="checkbox" id="inlineCheckbox1" 
onclick="document.getElementById('inlineCheckbox1').setAttribute('value', 
document.getElementById('inlineCheckbox1').value * -1)" value='-1'>
<label class="form-check-label" for="inlineCheckbox1">1</label>

I set a 'onclick' event and I set a 'value' attribute to -1. When you click on the checkbox or the label, 'value' will change its sign. So when you want to get the value, grab the 'value' attribute and check if it's greater or less than zero.