在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>元素,并使它们表现得好像是无线电或复选框输入.

此外,$().button('toggle')它只是伪代码,并且在实践中意味着与选择器一起使用,例如$('.btn-toggle').button('toggle').但是,您的示例有点不合标准,因为您已将用于按钮的类分配给<label>元素.

无论如何,尽管如此,如果您想要做的就是将所有输入框设置为true,您可以使用以下内容:

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

的jsfiddle

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

的jsfiddle

但是,这会丢弃您正在使用的一堆输入数据.

Answer 2

谢谢merv!谢谢你,我来到了这个解决方案:

<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发送值.