jquery – Bootstrap Switch,全局复选框,以(un)检查所有其他

前端之家收集整理的这篇文章主要介绍了jquery – Bootstrap Switch,全局复选框,以(un)检查所有其他前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用Bootstrap Switch进行Twitter Bootstrap.在这里,我有问题要检查或取消选中基于全局复选框选中或取消选中的所有复选框

这是自举交换机链接http://www.bootstrap-switch.org/

这就是我所做的

<!-- 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的:

$("#rowSelectAll").click(function () {
    $(".row-select").prop('checked',$(this).prop('checked'));
});

编辑:尝试只有一个全局和一个本地复选框

<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>

解决方法

尝试这个,它应该工作.另见这个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:

$('#rowSelectAll').on('switch-change',function (e,data) {
    var $el = $(data.el),value = data.value;
        $('.toggle-state-switch').each(function( index ) {
      $(this).bootstrapSwitch('setState',value);
    });
});

猜你在找的jQuery相关文章