javascript - 如何将单选按钮更改为 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