如何在jQuery中获取Bootstrap切换按钮的值

Question

如何在jQuery中获取Bootstrap切换按钮的值

25

我有这个标记和jQuery，但我无法成功捕获按钮值或开/关状态或任何形式的切换设置的识别：

HTML

<div class="form-group">
    <label class="col-md-2 control-label" for="payMethod">Payment Method</label>
      <div class="col-md-2">
        <label class="checkbox-inline bootstrap-switch-noPad" for="payMethod">
          <input type="checkbox" id="payMethod" name="payMethod" data-size="small" value="Credit" data-on-text="Credit" data-on-color="success" data-off-text="Cash" data-off-color="warning" tabindex="13">
        </label>
      </div>
  </div>

jQuery

$('#payMethod').on( 'change', function() {
  alert('slid');
}); // does not work

$( "#payMethod" ).click(function() {
  alert( $('#payMethod').val() );
}); // does not work

$('#payMethod').change(function() {
  alert('Toggle: ' + $(this).prop('checked'));
}); // does not work

$('input[type=checkbox][name=payMethod]').change(function() {
  alert('help'); // does not work
});

这里是滑块按钮（没有复选框）：

- H. Ferrence

6个回答

15

您可以像这样简单使用：如果在您的HTML代码中使用id=abc来启用Bootstrap切换。

$('#abc').prop('checked')

输出结果为：true 或 false。（当拨动开关处于开启状态时为 true，关闭状态时为 false）

- ThienSuBS

2

我猜脚本放在HTML标签前面了？如果是这样的话，请将脚本移动到Html标签后面，或者按照以下方式将脚本放置在jQuery函数中：

$(function()
{

    $('#payMethod').on( 'change', function() {
         alert('slid');
    }); // does not work

    $( "#payMethod" ).click(function() {
         alert( $('#payMethod').val() );
    }); // does not work

    $('#payMethod').change(function() {
        alert('Toggle: ' + $(this).prop('checked'));
    }); // does not work

    $('input[type=checkbox][name=payMethod]').change(function() {
        alert('help'); // does not work
    });
});

最佳实践是使用后者，将脚本放置在jQuery函数内部。因为脚本会在所有HTML标签都被渲染之后呈现。

- Oetawan Arya Chandra

这是代码片段。整个脚本位于jQuery库加载后的</body>标签之前。 - H. Ferrence

1

我已经根据@OetawanAryaChandra的建议取得了最大的进展。虽然还没有完全实现，但感谢您的指导。 - H. Ferrence

$( "#payMethod" ).click(function() { alert( $('#payMethod').val() ); }); 这个函数可以执行，但只有在 Credit 时才能返回，Cash 没有返回。 - H. Ferrence

1

使用 Chrome DevTool Ctrl+Shift+i->元素。我右键点击了切换按钮并选择了检查。然后，我切换了按钮的开和关。然后，我才意识到，触发的事件不是在输入元素上，而是在由BootstrapToggle添加的一个 div 上。

因此，在我的代码中，我添加了对上述div的监听器，并读取了我的切换按钮的状态。我的代码如下：

$('div[data-toggle="toggle"]').click(function() {
      console.log( "toggle_show_cancelled value: " + $("#toggle_show_cancelled").prop("checked"))
    })

- AEWRocks

1

您的脚本应该放在HTML正文中。

<Body>
    <div class="form-group">
        <label class="col-md-2 control-label" for="payMethod">Payment Method</label>
            <div class="col-md-2">
                <label class="checkbox-inline bootstrap-switch-noPad" for="payMethod">
                    <input type="checkbox" id="payMethod" name="payMethod" data-size="small" value="Credit" data-on-text="Credit" data-on-color="success" data-off-text="Cash" data-off-color="warning" tabindex="13">
                </label>
            </div>
        </div>
    <script>
        $('#payMethod').on( 'change', function() {
            alert('slid');
        });
    </script>
</Body>

- Pasindu Madushan

0

$('body').on('click', '#payMethod', function (e) {
if($(this).prop("checked") == true){
  console.log("Checkbox is checked.");
}else{
  console.log("Checkbox is unchecked.");
}

试一下这个：

- Shahidkhan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- etcz0ne · Accepted Answer

34

你可以尝试这个

$("#payMethod").change(function(){
    if($(this).prop("checked") == true){
       //run code
    }else{
       //run code
    }
});

- etcz0ne

没错，但 Bootstrap 插件显示一个滑块按钮，而没有复选框。我想这就是我遇到麻烦的原因。 - H. Ferrence

你已经检查过这个链接了吗？希望能对你有所帮助：https://dev59.com/DGUo5IYBdhLWcg3w1yTH - etcz0ne

滑块（'获取值'）也不起作用。我只是无法让它在单击、更改或滑动等操作时触发任何事件。 - H. Ferrence

1

$('：checkbox').checkboxpicker().change(function() { ... }); - Himaan Singh