javascript – 在Twitter Bootstrap上切换复选框

前端之家收集整理的这篇文章主要介绍了javascript – 在Twitter Bootstrap上切换复选框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我用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>

解决方法

在技​​术上,Twitter Bootstrap Buttons插件旨在使用< button>并且它们的行为就像收音机或复选框输入.

另外,$().button(‘toggle’)只是psuedo代码,实际上是用于选择器,例如$(‘.btn-toggle’).按钮(‘toggle’).但是,您的示例有点不合标准,因为您已经将按钮的类别分配给< label>元素.

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

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

JSFiddle

如果您想使用< button>元素会是这样的:

JSFiddle

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

原文链接:https://www.f2er.com/js/154835.html

猜你在找的JavaScript相关文章