在Twitter Bootstrap上切换复选框 [英] Toggle checkbox on Twitter Bootstrap

问题描述

我使用Twitter Bootstrap创建了一组复选框。现在我想做一个全选或全部取消选择按钮。我如何使用JS函数？

Twitter Bootstrap文档说使用$（）。button（'toggle'），但它不工作。 / p>

这是我的代码片段：

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

解决方案

谢谢merv！感谢您来到此解决方案：

 < button id =toggle-colorsclass =btn btn-info >切换< / button> 
< script> 
 $（'＃toggle-colors'）。click（function（）{
 $（'。btn-group input [name ^ =colors]' b $ b //切换复选框
 $（this）.prop（'checked'，！$（this）.prop（'checked'））; 
 // toggle class 
 $ this）.parents（'label'）。toggleClass（'active'）; 
}）; 
}）; 
< / script> 
 

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

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?

The Twitter Bootstrap documentation says to use $().button('toggle') but it doesn't work.

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>

解决方案

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上切换复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！