如何获取Bootstrap开关的值

Question

我正在使用bootstrap开关，并希望在单击开关时获取复选框的值。我尝试了下面的代码，但没有得到值。您能否检查我的代码并告诉我哪里出错了？

$('.make-switch').bootstrapSwitch('state');
$('#price_check').click(function () {
  //alert('Test');
  var check = $(this).val();
   console.log(check)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
<div class="margin-bottom-10">
 <input type="checkbox" class="make-switch" id="price_check" name="pricing" data-on-color="primary" data-off-color="info" value="true">
  </div>

- Tamara

Answer 1

我猜这些解决方案在v5之后已经过时了？
无论如何，这些都对我没用。所以我使用了这个解决方案。

$('#orderSwitch').on('change', function() {
    console.log($(this).is(':checked'));
});

- Sagive

Answer 2

Tamara，

Bootstrap Switch有一个onSwitchChange属性，可以给你切换的状态。请参考这个fiddle：https://jsfiddle.net/learnwithclyde/to2hng3f/

$("#price_check").bootstrapSwitch({
  onSwitchChange: function(e, state) { 
    alert(state);
  }
});

上面的代码片段展示了如何实现 onSwitchChange 属性并获取切换控件的 state。

- Clyde D'Souza

---

请帮我解决一下这个问题。现在我该如何将这个状态值发送到 ajax API 调用中？ https://jsfiddle.net/pmgrfhLw/ - Tamara

@Tamara，您能否请发布一个新问题，而不是将其添加到评论中？通常，您希望将堆栈溢出问题的范围限制在一个问题上。希望这有意义。如果有人在寻找，请随时在此处将新帖子的链接作为评论添加。谢谢！ - Clyde D'Souza

谢谢您在之前的问题中提供的帮助，我会记住您的建议。但是我已经自己完成了。 - Tamara

Answer 3

切换开关时不会触发click事件。请尝试使用事件switchChange.bootstrapSwitch，该事件在更改开关时触发。

另外，为了检查是否处于打开状态，我检查是否应用了bootstrap-switch-on类。如果没有，则表示开关关闭。

$('.make-switch').bootstrapSwitch('state');
$('.make-switch').on('switchChange.bootstrapSwitch',function () {
  var check = $('.bootstrap-switch-on');
  if (check.length > 0) {
    console.log('ON')
  } else {
    console.log('OFF')
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
<div class="margin-bottom-10">
 <input type="checkbox" class="make-switch" id="price_check" name="pricing" data-on-color="primary" data-off-color="info" value="true">
  </div>

- Wimanicesir

Answer 4

这段代码对我有用。

   $('#price_check').on('switchChange.bootstrapSwitch', function (e, data) {

     alert($('#price_check').bootstrapSwitch('state'));

   });

- Claudio Martinez

---

如果你有多个开关，这个方法完美适用。其他答案只适用于一个开关的情况。 - JBin

Answer 5

$("#price_check").change(function () {
    var price = false;

    if ($(this).prop('checked') == true) {
        price = true;
    } else {
        price = false;
    }
}

- vigneshwaran

---

你可以简化为 $("#price_check").change(function() { var price = $(this).prop('checked') }。 - Luke Watts

Answer 6

试试这个，你将会得到已选元素的值。

$("#boot_switch").bootstrapSwitch({
  onSwitchChange: function(e) {
    alert(e.target.value);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
<div class="margin-bottom-10">


  <input type="checkbox" class="make-switch" id="boot_switch" name="pricing" data-on-color="success" data-off-color="info" value="value1">
</div>

- Abhishek Singh

Answer 7

尝试使用这个方法获取值（true或false）

$('#boot_switch').on('switchChange.bootstrapSwitch', function (event, status) {
    console.log(status);
});

- hamza masoud

Answer 8

$("#price-check").prop("checked") // true / false

- deFreitas

---

虽然这段代码可能解决了问题，但是包括解释它如何以及为什么解决了问题将有助于提高您的帖子质量，并可能导致更多的赞。请记住，您正在回答未来读者的问题，而不仅仅是现在提问的人。请编辑您的答案以添加解释并指出适用的限制和假设。 - jasie