javascript - 在 Twitter Bootstrap 上切换复选框

Question

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

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

这是我的代码片段:

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

Answer 1

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

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

无论如何，尽管如此，如果您只想将所有输入框设置为 true，您可以使用如下内容:

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

JSFiddle

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

JSFiddle

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