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

Question

I am trying to change radio buttons in PHP to buttons from Bootstrap.

(I would also like to get rid of the submit button at the bottom of the page and have these submit the answer.)

This code works but it uses radio buttons:

    <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>

I've tried this but it does not send the value.

 <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

You can use the Bootstrap buttons radio component to make a radio button look like normal button.

<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>

You can see the live example, and other options here - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-stateful-buttons.php

Answer 2

This worked. Thanks! Now I'll try to remove the O in the middle of the button and remove the Submit button, so clicking on Boss will submit the value.

<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>

Image of radio / buttons

Answer 3

This worked! Thanks very much! Now I will try to remove the Submit button and make the clicked values submit the value. I'm trying to reduce space on the page.

Bootstrap Radio / buttons. It worked

<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>