Javascript 获取选中的引导程序复选框的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39152661/
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
get value of a checked bootstrap checkbox
提问by Brave Type
I have this HTML form:
我有这个 HTML 表单：
<div class="animated-switch">
<input id="switch-success" name="switch-success" checked="" type="checkbox">
<label for="switch-success" class="label-success"></label>
</div>
How i can know if the input is checked or not ?
我怎么知道输入是否被检查？
I tried like this but nothing alerted:
我试过这样但没有任何提醒：
$(document).on('click','.animated-switch',function(e){
alert($('#switch-success:checked').val() );
});
Here a JSFIDDLE file in order to see my clear example: https://jsfiddle.net/s2f9q3fv/
这里有一个 JSFIDDLE 文件，以便查看我的清晰示例：https://jsfiddle.net/s2f9q3fv/
采纳答案by Kristijan Iliev
Your code works fine in the snippet. You have forgotten to add value to your checkbox, but even without it you should be able to see the alert message with undefined value (see below the value 'test' was added in the snippet).
您的代码在代码段中运行良好。您忘记为复选框添加值，但即使没有它，您也应该能够看到带有未定义值的警报消息（请参阅下面的代码段中添加了值“test”）。
$(document).on('click','#switch-success:checked',function(e){
alert($('#switch-success:checked').val() );
});.animated-switch > input[type="checkbox"] {
display: none; }
.animated-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px; }
.animated-switch > label::before {
background: black;
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position: absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px; }
.animated-switch > label::after {
background: white;
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px; }
.animated-switch > input[type="checkbox"]:checked + label::before {
background: inherit;
opacity: 0.5; }
.animated-switch > input[type="checkbox"]:checked + label::after {
background: inherit;
left: 20px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="animated-switch">
<input id="switch-success" name="switch-success" checked="" value="test" type="checkbox">
<label for="switch-success" class="label-success"></label>
</div>UPDATE:
You should bind the click event on the checkbox itself, not the parent. Try the snipped again with the fancy animation.
Notice if you want the alert always to be executed you have to remove the :checkedattribute in the selector.
更新：您应该在复选框本身而不是父级上绑定单击事件。用精美的动画再次尝试剪辑。请注意，如果您希望始终执行警报，则必须删除:checked选择器中的属性。
回答by Neeraj Kumar
That gets if the checkbox is checked.
如果复选框被选中，那会得到。
$('#' + id).is(":checked")
回答by badrb
Try this
尝试这个
$(".animated-switch").change(function () {
alert($('#switch-success:checked').val() );
});
