Javascript 在 Twitter Bootstrap 上切换复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11958523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle checkbox on Twitter Bootstrap
提问by RodMarx
I made a group of checkboxes with Twitter Bootstrap. Now I would like to do a "select all" or "deselect all" button. How could I do this using a JS function?
我用 Twitter Bootstrap 创建了一组复选框。现在我想做一个“全选”或“取消全选”按钮。我怎么能用 JS 函数做到这一点？
The Twitter Bootstrap documentation says to use $().button('toggle') but it doesn't work.
Twitter Bootstrap 文档说使用 $().button('toggle') 但它不起作用。
Here is my code snippet:
这是我的代码片段：
<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>
采纳答案by RodMarx
Thank you merv! Thanks to you I came to this solution:
谢谢你！感谢您，我来到了这个解决方案：
<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>
I don't use the button tag as Twitter Bootstrap recommends because it doesn't send the value per POST.
我不使用 Twitter Bootstrap 推荐的按钮标签，因为它不会发送每个 POST 的值。
回答by merv
Technically, the Twitter Bootstrap Buttons plugin is meant to work with <button>elements and have them behave as though they wereradio or checkbox inputs.
从技术上讲，Twitter Bootstrap Buttons 插件旨在处理<button>元素并使它们表现得就像是单选框或复选框输入一样。
Also, $().button('toggle')is just psuedo code, and in practice is meant to be used with a selector, e.g., $('.btn-toggle').button('toggle'). However, your example is a bit substandard, since you have assigned classes intended for buttons to <label>elements.
此外，$().button('toggle')只是伪代码，实际上是为了与选择器一起使用，例如，$('.btn-toggle').button('toggle'). 但是，您的示例有点不合标准，因为您已将用于按钮的类分配给<label>元素。
Anyway, despite all that, if all you want to do is set all your input boxes to true, you could use something like:
无论如何，尽管如此，如果您只想将所有输入框设置为 true，您可以使用以下内容：
$('.btn-group input[type="checkbox"]').prop('checked', true);
JSFiddle
JSFiddle
If you wanted to do it with <button>elements, it would be something like this:
如果你想用<button>元素来做它，它会是这样的：
JSFiddle
JSFiddle
However, that drops a bunch of the input data which you're working with.
但是，这会丢弃您正在使用的一堆输入数据。
回答by ibanez182
I found a way to do this without JS
我找到了一种无需 JS 的方法
http://codepen.io/ibanez182/pen/WxKABq/
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>
