如何将单选按钮更改为Bootstrap按钮

Question

我正在尝试将PHP中的单选按钮更改为Bootstrap中的按钮。

（我也想摆脱页面底部的“提交”按钮，让他们提交答案。）

该代码有效，但使用单选按钮：

    <div id='javatbd<?php echo $myfname; ?>' class='col-xs-12 form-group answer-item radio-item radio' <?php echo $sDisplayStyle; ?> >
        <input
            class="radio"
            type="radio"
            value="<?php echo $code; ?>"
            name="<?php echo $name; ?>"
            id="answer<?php echo $name.$code; ?>"
            <?php echo $checkedState;?>
            onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
            aria-labelledby="label-answer<?php echo $name.$code; ?>"
         />
        <label for="answer<?php echo $name.$code; ?>" class="control-label radio-label"></label> 
        <div class="label-text label-clickable" id="label-answer<?php echo $name.$code; ?>">
            <?php echo $answer; ?>
        </div>
    </div>
.
.
.
    <div class="col-xs-6 save-all text-right">
                <button type="submit" id="movesubmitbtn" value="movesubmit" name="movesubmit" accesskey="l" class="submit button btn btn-lg  btn-primary">Submit</button>
            </div>

我已经尝试过了，但是它不发送值。

 <div id='javatbd<?php echo $myfname; ?>' class='col-xs-12 form-group answer-item radio-item btn' <?php echo $sDisplayStyle; ?> >

       <div class="container-fluid">
             <input
                class="btn btn-primary btn-block"
                type="button"
                value="<?php echo $code; ?>"
                name="<?php echo $name; ?>"
                id="answer<?php echo $name.$code; ?>"
                <?php echo $checkedState;?>
                onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
                aria-labelledby="label-answer<?php echo $name.$code; ?>"
            />
       </div>
    </div>

Answer 1

您可以使用Bootstrap按钮单选组件使单选按钮看起来像普通按钮。

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Option 1
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Option 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> Option 3
    </label>
</div>

您可以在此处看到实时示例和其他选项-http: //www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-stateful-buttons.php

Answer 2

这工作了。 谢谢！ 现在，我将尝试删除按钮中间的O并删除Submit按钮，因此单击Boss将提交该值。

<div class="btn btn-primary btn-block">
   <input
      class="radio"
      type="radio"
      value="<?php echo $code; ?>"
      name="<?php echo $name; ?>"
      id="answer<?php echo $name.$code; ?>"
      <?php echo $checkedState;?>
      onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
      aria-labelledby="label-answer<?php echo $name.$code; ?>"
   />
  <label for="answer<?php echo $name.$code; ?>" class="control-label radio-label"></label>

收音机/按钮的图像

Answer 3

这工作了！ 非常感谢！ 现在，我将尝试删除“提交”按钮，并使单击的值提交该值。 我正在尝试减少页面上的空间。

Bootstrap单选按钮。 有效

<div class="btn-block" data-toggle="buttons">
    <label class="btn btn-primary btn-block">
       <input
          class="radio"
          type="radio"
          value="<?php echo $code; ?>"
          name="<?php echo $name; ?>"
          id="answer<?php echo $name.$code; ?>"
          <?php echo $checkedState;?>
          onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
          aria-labelledby="label-answer<?php echo $name.$code; ?>"
       />
      <label for="answer<?php echo $name.$code; ?>" class="control-label radio-label"></label>

      <div class="label-text label-clickable" id="label-answer<?php echo $name.$code; ?>">
          <?php echo $answer; ?>
      </div>
</div>