get value of a checked bootstrap checkbox

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/

---

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>

---

如果复选框被选中，那会得到。

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

---

尝试这个

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

链接地址: http://www.djcxy.com/p/55988.html

上一篇: MVC 4根据复选框检查来显示/隐藏文本框

下一篇: 获取选中的引导复选框的值