Question

我正在使用引导程序开关，我想在单击开关时获取复选框的值。我已经尝试过了，但我没有得到价值。您能否在下面检查我的代码并让我知道我在哪里做错了

$('.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>

Answer 1

点击事件不会通过开关触发。尝试使用事件 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>

Answer 2

塔玛拉

Bootstrap Switch具有一个onSwitchChange属性，该属性将为您提供切换的状态。请查看此小提琴：https://jsfiddle.net/learnwithclyde/to2hng3f/

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

上面的代码段是实现onSwitchChange属性并获取切换控件的state的方式。

Answer 3

尝试此操作，您将获得选中元素的值。

$("#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>

Answer 4

此代码对我有用

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

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

   });

Answer 5

我猜所有这些解决方案都是 v5 的旧新闻？
无论如何，这些都不适合我。所以我使用了这个解决方案

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

如何获得自举开关的价值

5 个答案: