javascript 如何获取引导开关的值

3vpjnl9f  于 2023-01-24  发布在  Java
关注(0)|答案(8)|浏览(130)

我正在使用 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>
des4xlb0

des4xlb01#

我猜所有这些解决方案都是v5的旧闻了吧?
无论如何这些方法对我都不起作用。所以我用了这个解决方案

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

uqjltbpv2#

塔玛拉
Bootstrap Switch有一个onSwitchChange属性,它可以为您提供切换的 * 状态 *。https://jsfiddle.net/learnwithclyde/to2hng3f/

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

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

fhity93d

fhity93d3#

开关不会触发单击事件。请尝试使用事件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>
z9smfwbn

z9smfwbn4#

这个代码对我有用

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

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

   });
o2rvlv0m

o2rvlv0m5#

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

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

mitkmikd6#

试试这个,你会得到检查元素的值。

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

yi0zb3m47#

尝试此操作以获取值(true或false)

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

hrysbysz8#

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

相关问题