9

TwitterBootstrapを使用してチェックボックスのグループを作成しました。ここで、「すべて選択」または「すべて選択解除」ボタンを実行したいと思います。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>
4

3 に答える 3

14

技術的には、Twitter Bootstrap Buttonsプラグインは、<button>要素を操作し、それらをラジオまたはチェックボックス入力であるかのように動作させることを目的としています。

また、$().button('toggle')これは単なる疑似コードであり、実際には、セレクターで使用することを目的としています$('.btn-toggle').button('toggle')。<label>ただし、ボタンを対象としたクラスを要素に割り当てているため、この例は少し標準以下です。

とにかく、それにもかかわらず、すべての入力ボックスをtrueに設定するだけの場合は、次のようなものを使用できます。

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

JSFiddle

<button>要素を使用してそれを実行したい場合は、次のようになります。

JSFiddle

ただし、これにより、作業している入力データの束が削除されます。

于 2012-08-14T23:51:26.890 に答える
8

ありがとう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>

POSTごとに値を送信しないため、TwitterBootstrapが推奨するボタンタグは使用しません。

于 2012-08-15T09:18:05.320 に答える
4

JSなしでこれを行う方法を見つけました

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>
于 2016-07-29T10:21:50.617 に答える