jQuery Bootstrap Switch，全局复选框以（取消）选中所有其他
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18911067/
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
Bootstrap Switch, global checkbox to (un)check all other
提问by Code Lover
I am using Bootstrap Switch for Twitter Bootstrap. Here I have problem to check or uncheck all checkbox based on global checkbox checked or unchecked
我正在将 Bootstrap Switch 用于 Twitter Bootstrap。在这里，我有问题根据选中或未选中的全局复选框来选中或取消选中所有复选框
Here is the bootstrap switch link http://www.bootstrap-switch.org/
这是引导程序开关链接http://www.bootstrap-switch.org/
Here is what I have done
这是我所做的
<!-- this is the global checkbox -->
<div class="make-switch switch-mini">
<input type="checkbox" id="rowSelectAll">
</div>
<!-- row checkboxs -->
<div class="make-switch switch-mini">
<input type="checkbox" class="row-select">
</div>
<div class="make-switch switch-mini">
<input type="checkbox" class="row-select">
</div>
<div class="make-switch switch-mini">
<input type="checkbox" class="row-select">
</div>
jQuery:
jQuery：
$("#rowSelectAll").click(function () {
$(".row-select").prop('checked', $(this).prop('checked'));
});
EDIT: tried with only one global and one local checkbox
编辑：仅尝试使用一个全局和一个本地复选框
<div class="make-switch switch-mini">
<input type="checkbox" id="rowSelectAll">
</div>
<div id="toggle-state-switch" class="make-switch switch-mini row-select">
<input type="checkbox" class="">
</div>
采纳答案by nik
Try this one, it should work. Also see this jsfiddle...http://jsfiddle.net/URAcy/5/
试试这个，应该可以。另请参阅此 jsfiddle ... http://jsfiddle.net/URAcy/5/
<!-- this is the global checkbox -->
<div class="make-switch switch-mini" id="rowSelectAll">
<input type="checkbox" id="rowSelectAllc">
</div>
<!-- row checkboxs -->
<div class="make-switch switch-mini toggle-state-switch">
<input type="checkbox" class="row-select">
</div>
<div class="make-switch switch-mini toggle-state-switch">
<input type="checkbox" class="row-select">
</div>
<div class="make-switch switch-mini toggle-state-switch">
<input type="checkbox" class="row-select">
</div>
JS:
JS：
$('#rowSelectAll').on('switch-change', function (e, data) {
var $el = $(data.el)
, value = data.value;
$('.toggle-state-switch').each(function( index ) {
$(this).bootstrapSwitch('setState' , value);
});
});
回答by Drixson Ose?a
Try this:
尝试这个：
<!-- this is the global checkbox -->
<div class="make-switch switch-mini">
<input type="checkbox" id="rowSelectAll">
</div>
<!-- row checkboxs -->
<div class="myswitch make-switch switch-mini">
<input type="checkbox" class="row-select">
</div>
<div class="myswitch make-switch switch-mini">
<input type="checkbox" class="row-select">
</div>
<div class="myswitch make-switch switch-mini">
<input type="checkbox" class="row-select">
</div>
then in your script
然后在你的脚本中
$('#rowSelectAll').on('change', function(){
$('.myswitch').each(function(){
if($(this).hasClass('switch-on')){
$(this).bootstrapSwitch('setState' , false);
$(this).removeClass('switch-on');
}else{
$(this).bootstrapSwitch('setState' , true);
$(this).addClass('switch-on');
}
});
});
回答by user2680900
updated your fiddle - [ http://jsfiddle.net/URAcy/6/]
更新了你的小提琴 - [ http://jsfiddle.net/URAcy/6/]
It should be
它应该是
$('#rowSelectAll').on('switch-change', function(){....}
