16

twitterbootstrapjavascriptラジオボタンで問題が発生しました。いずれかを選択して送信ボタンをクリックすると、選択したラジオ値が表示されません。

私のコード：

<form action="" class="form-horizontal" method="post">
  <fieldset>
    <div class="control-group">
      <label class="control-label">Type:</label>
      <div class="controls">
        <div class="btn-group" data-toggle="buttons-radio">
          <button type="button" data-toggle="button" name="option" value="1" class="btn btn-primary">Option One</button>
          <button type="button" data-toggle="button" name="option" value="2" class="btn btn-primary">Option Two</button>
        </div>
      </div>
    </div>
    <div class="form-actions">
      <input class="btn btn-primary" type="submit" value="Go">
      <a href="index.php" class="btn">Back</a>
    </div>
  </fieldset>
</form>

ご覧のとおり、name="option" value="1"とname="option" value="2"がありますが、ラジオを1つ選択すると、次のようになります。

<?php print_r($_POST); ?>

option投稿は指定されていません。

これは、Twitterのラジオボタンでのみ発生します。これを追加すると、変数<input type="text" name="test" value="something"/>に表示されるためです。$_POST

問題はどこだ？

4

5 に答える 5

25

問題は<button>、クリックしても何も送信されないことです。非表示の入力フィールドが必要で、ボタンをクリックしたときに入力内で値の変更をトリガーする必要があります

<input type="hidden" name="option" value="" id="btn-input" />
<div class="btn-group" data-toggle="buttons-radio">  
  <button id="btn-one" type="button" data-toggle="button" name="option" value="1" class="btn btn-primary">Option One</button>
  <button id="btn-two" type="button" data-toggle="button" name="option" value="2" class="btn btn-primary">Option Two</button>
</div>

<script>
  var btns = ['btn-one', 'btn-two'];
  var input = document.getElementById('btn-input');
  for(var i = 0; i < btns.length; i++) {
    document.getElementById(btns[i]).addEventListener('click', function() {
      input.value = this.value;
    });
  }
</script>

ブートストラップの場合、「ラジオ」はボタンの状態と動作にのみ影響します。フォームの動作には影響しません。

于 2012-07-13T00:16:17.503 に答える
17

これは、上記の部分に代わるjqueryです。

$("body").find(".btn").each(function(){
    $(this).bind('click', function(){
      $("input[name=view-opt-bt-group-value]").value = this.value
    });
  });

これに対するHTMLは次のとおりです。

<div class="row pull-right">
  <div class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn" value="0"><i class="icon-th-list"></i></button>
    <button type="button" class="btn" value="1"><i class="icon-th-list"></i></button>
    <input type="hidden" name="view-opt-bt-group-value" value="0">
  </div>
</div>
于 2012-10-03T14:29:08.547 に答える
8

btnクラスをs に追加できる<label>ので、非表示の入力を必要とせず、ブートストラップまたは JavaScript がなくても html ヘルパーを引き続き使用できる場合は正常に低下する次のことを達成しました。

試してみてください。

<div class="btn-group" data-toggle="buttons-radio">
   <label class="btn">@Html.RadioButton("option", 1) Option 1</label>
   <label class="btn">@Html.RadioButton("option", 2) Option 2</label>
</div>
...
<script type="text/javascript">
    $(function () {
        // Bootstrappable btn-group with checkables inside
        // - hide inputs and set bootstrap class
        $('.btn-group label.btn input[type=radio]')
          .hide()
          .filter(':checked').parent('.btn').addClass('active');
    });
</script>

更新:現在、Bootstrap 3 でこの形式を使用していますが、わずかに異なるマークアップ (つまりdata-toggle="buttons") が必要です。http://getbootstrap.com/javascript/#buttonsを参照してください

于 2013-04-25T12:21:59.550 に答える
3

私が思いついた最も単純なjQueryコードは次のとおりです。

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn" onClick="$('#gender').val('f');">♀</button>
    <button type="button" class="btn" onClick="$('#gender').val('m');">♂&lt;/button>
</div>
<input name="gender" id="gender" type="hidden" value="">

私にとっては例外的なユースケースなので、堅牢性や柔軟性は必要ありませんでした。

于 2012-12-02T05:41:14.540 に答える