51

Twitter Bootstrap ボタン グループをフォーム入力コントロールの実際のセットとして使用しようとしています。デフォルトでは、これらのボタン グループはラジオ ボタンまたはチェックボックス グループのように機能させることができますが、<button>要素を使用するため、実際にはラジオ ボタンまたはチェックボックスのように使用することはできません。

私の調査では、CSS を使用してこれらのブートストラップ ボタンが実際にラジオ ボタンとチェックボックスを制御するようにするこのサイトを見つけました。唯一の問題は、CSS の最近の機能を使用しているため、IE9 以上が必要なことです。

サポートを IE8 に拡張したいと考えています。厳しいCSS要件なしで上記のリンクと同じ機能を提供する別の（おそらくJS制御の）ソリューションはありますか？

お時間をいただきありがとうございます。

4

6 に答える 6

142

Bootstrap 3には「ネイティブ」ソリューションがあります...

現在、この問題に対する「真の」Bootstrap ソリューションがあり、古いブラウザでも問題なく動作するようです。外観は次のとおりです。

// get selection
$('.colors input[type=radio]').on('change', function() {
    console.log(this.value);
});
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="btn-group colors" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" value="red" autocomplete="off" checked> Red
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="orange" autocomplete="off"> Orange
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="yellow" autocomplete="off"> Yellow
  </label>
</div>

<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

詳細については、関連する Bootstrap のドキュメントを参照してください。

ブートストラップ 4

Bootstrap 4は Bootstrap 3 と同じ方法でコンポーネントをサポートしますが、Bootstrap 4は IE9 をサポートしません。Bootstrap IE8プロジェクトを確認してください。

于 2013-09-18T23:49:06.073 に答える
23

ブートストラップ 2

このフィドルを試してください

HTML:

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>
<input type="hidden" id="buttonvalue"/>

脚本：

$(".btn-group button").click(function () {
    $("#buttonvalue").val($(this).text());
});

次に、buttonvalueサーバー側を取得します

于 2013-03-12T18:24:39.640 に答える
4

Bootstrap 3.2 では、非表示の入力をボタン グループ コンテナーの中央に配置します。テキスト コンテンツの代わりに、データ値フィールドの値を取得します。

<div id="test" class="btn-group checkit" data-toggle="buttons-radio">
    <button type="button" data-value="1" class="btn btn-default active">Yes</button>
    <input type='hidden' name="testfield" value='1'>
    <button type="button" data-value="0" class="btn btn-default ">No</button>
</div>

次に、テンプレートの onload 部分に小さな JavaScript スニペットを挿入します。

$('.checkit .btn').click(function() {
    $(this).parent().find('input').val($(this).data("value"));
});

したがって、ボタン グループに .checkit を追加し、非表示の入力フィールドを挿入するだけです。

ブートストラップ 3.2 では、ボタン グループをラジオまたはチェックボックス入力で直接使用できます。

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="options" id="option1" value="1" /> Yes
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option2" value="0" /> No
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option3" value="42" /> Whatever
    </label>
</div>

ここを参照してください： http://jsfiddle.net/DHoeschen/gmxr45hh/1/

于 2014-08-25T17:26:46.893 に答える
1

非表示のフォーム要素と JavaScript を使用して、ボタンの状態を使用してフォーム要素の状態をトリガーできます。

于 2013-03-12T15:26:55.090 に答える
1

CSS のみのソリューション:

HTML:

<div class="btn-group">
    <label class="btn btn-primary"><input type="checkbox"><span>Button 1</span></label>
    <label class="btn btn-primary"><input type="checkbox"><span>Button 2</span></label>
</div>

SCSS/LESS:

 label.btn {
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;

    span {
      display: block;
      padding: 10px 15px;
    }

    input[type=checkbox] {
      display: none;
    }

    input:checked + span {
      display: block;
      color: #fff;
      background-color: #285e8e;
    }
  }

ここでJSfiddle

于 2016-10-21T19:03:54.527 に答える