在 Twitter Bootstrap 上切换复选框答案

【问题标题】：Toggle checkbox on Twitter Bootstrap在 Twitter Bootstrap 上切换复选框
【发布时间】：2012-08-11 02:41:15
【问题描述】：

我使用 Twitter Bootstrap 制作了一组复选框。现在我想做一个“全选”或“取消全选”按钮。如何使用 JS 函数来做到这一点？

Twitter Bootstrap 文档说要使用 $().button('toggle') 但它不起作用。

这是我的代码 sn-p：

<div class="control-group">
<div class="controls">
    <div class="input">
        <div class="btn-group">
            <label class="btn  btn-toggle" for="colors-1-toggle-0">
                <input type="checkbox" id="colors-1-toggle-0" name="colors-1[]" value="color_c" />C
            </label>
            <label class="btn  btn-toggle" for="colors-1-toggle-1">
                <input type="checkbox" id="colors-1-toggle-1" name="colors-1[]" value="color_m" />M
            </label>
            <label class="btn  btn-toggle" for="colors-1-toggle-2">
                <input type="checkbox" id="colors-1-toggle-2" name="colors-1[]" value="color_y" />Y
            </label>
            <label class="btn  btn-toggle" for="colors-1-toggle-3">
                <input type="checkbox" id="colors-1-toggle-3" name="colors-1[]" value="color_k" />K
            </label>
        </div>
    </div>
</div></div>

【问题讨论】：

标签： javascript jquery checkbox twitter-bootstrap

【解决方案1】：

我找到了一种不用 JS 的方法

http://codepen.io/ibanez182/pen/WxKABq/

<div class="form-group">
    <div class="checkbox">
        <label data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            <input type="checkbox"/> A checkbox
        </label>
    </div>
</div>
<div id="collapseOne" aria-expanded="false" class="collapse">
    <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe ut molestias eius, nam neque esse eos modi corrupti harum fugit, hic recusandae praesentium, minima ipsa eligendi architecto at! Culpa, explicabo.</div>
</div>

【讨论】：

【解决方案2】：

谢谢你！感谢您，我找到了这个解决方案：

<button id="toggle-colors" class="btn btn-info">Toggle</button>
<script>
    $('#toggle-colors').click(function() {
        $('.btn-group input[name^="colors"]').each(function(){
            // toggle checkbox
            $(this).prop('checked',!$(this).prop('checked'));
            // toggle class
            $(this).parents('label').toggleClass('active');
        });
    });
</script>

我不使用 Twitter Bootstrap 推荐的按钮标签，因为它不会发送每个 POST 的值。

【讨论】：

【解决方案3】：

从技术上讲，Twitter Bootstrap Buttons 插件旨在与 <button> 元素一起使用，并使它们的行为就像单选或复选框输入一样。

另外，$().button('toggle') 只是伪代码，实际上是与选择器一起使用的，例如$('.btn-toggle').button('toggle')。但是，您的示例有点不合标准，因为您已将用于按钮的类分配给 <label> 元素。

无论如何，尽管如此，如果您只想将所有输入框设置为 true，您可以使用类似的东西：

$('.btn-group input[type="checkbox"]').prop('checked', true);

JSFiddle

如果你想用<button> 元素来做，它会是这样的：

JSFiddle

但是，这会丢弃您正在使用的大量输入数据。

【讨论】：