如何在 jQuery 中获取 Bootstrap 切换按钮的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33621053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the value of a Bootstrap toggle button in jQuery
提问by H. Ferrence
I have this markup and jQuery but I cannot successfully capture the button value or on/off or any form of recognition of the setting of the toggle:
我有这个标记和 jQuery，但我无法成功捕获按钮值或开/关或任何形式的切换设置识别：
HTML
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
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
});
Here are the slider buttons (there is no checkbox):
这是滑块按钮（没有复选框）：
回答by Makubex
you can try this
你可以试试这个
$("#payMethod").change(function(){
if($(this).prop("checked") == true){
//run code
}else{
//run code
}
});
回答by ThienSuBS
You can use simple like this: If in your html code you using id=abc for bootstrap toggle.
您可以像这样使用简单的方法：如果在您的 html 代码中使用 id=abc 进行引导切换。
$('#abc').prop('checked')
Output is: true or false. (True when toggle in on, and false when toggle is off)
输出是：真或假。（开启时为真，关闭时为假）
回答by Oetawan Arya Chandra
I guess that the script placed before the HTML tag? If so, then move the script after the Html tag, or place the script inside jQuery function as below:
我猜脚本放在 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
});
});
The best practice is to use the later one, which place the script inside the jQuery function. Because the scripts will be rendered after all HTML tags has been rendered.
最佳实践是使用后者，将脚本放在 jQuery 函数中。因为脚本将在所有 HTML 标记都已呈现后呈现。
回答by Pasindu Madushan
Your script should need to be inside html body.
您的脚本应该需要在 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>
