Question

我试图实现一个非常简单的单选按钮选择，但是一旦我选择一个单选按钮，即使我点击另一个按钮，该按钮也会保持选中状态。不过，其他单选按钮的行为（data-toggle）也会起作用。

<div class="row">
<div class="col-md-offset-2 col-md-8">
    <section id="choice">
            <h3> Please choose </h3>

        <div class="col-md-5">
            <li class="plan">
                <ul>
                    <li>
                        <input type="radio" name="choice" id="id1" value="val1" data-toggle="tab" data-target="#1">First</input>
                    </li>
                    <li>
                        <input type="radio" name="choice" id="id2" value="val2" data-toggle="tab" data-target="#2">Second</input>
                    </li>
                    <li>
                        <input type="radio" name="choice" id="id3" value="val3" data-toggle="tab" data-target="#3">Third</input>
                    </li>
                </ul>
            </li>
        </div>
        <div class="tab-content col-md-7">
            <div class="tab-pane" id="1">
                <li class="plan">
                    <ul>
                        <li>Price: <b> 17,97 €</b>
                        </li>
                    </ul>
                </li>
            </div>
            <div class="tab-pane" id="2">
                <li class="plan">
                    <ul>
                        <li>Price: <b> 59,88 €</b>
                        </li>
                    </ul>
                </li>
            </div>
            <div class="tab-pane" id="3">
                <li class="plan">
                    <ul>
                        <li>Price: <b> 95,76 €</b>
                        </li>
                    </ul>
                </li>
            </div>
        </div>
    </section>
</div>

这是一个小提琴： http://jsfiddle.net/RWGRL/

任何想法如何使这项工作？

Answer 1

数据肘节=＆＃34;标签＆＃34;用于在引导程序中生成选项卡。你为什么要把它应用到单选按钮？摆脱它，它应该解决问题。

Answer 2

我改变了

<input type="radio" name="choice" id="id1" value="val1" data-toggle="tab" data-target="#1">First</input>

<input type="radio" name="choice" id="id2" value="val2" data-toggle="tab" data-target="#2">Second</input>

<input type="radio" name="choice" id="id3" value="val3" data-toggle="tab" data-target="#3">Third</input>

到

<input type="radio" name="choice" id="id1" value="val1" data-target="#1">First</input>

<input type="radio" name="choice" id="id2" value="val2" data-target="#2">Second</input>

<input type="radio" name="choice" id="id3" value="val3" data-target="#3">Third</input>

它开始为我正常工作。

小提示工作：http://jsfiddle.net/gzEH9/

Answer 3

只需使用jQuery在用户点击单选按钮时隐藏/显示数据。以下是您的完整HTML：

<强> HTML

<div class="row">
    <div class="col-md-offset-2 col-md-8">
        <section id="laufzeit">
                <h3> Please choose </h3>

            <div class="col-md-5">
                <div class="radio">
                    <label>
                        <input type="radio" class="option1" name="optionsRadios" id="optionsRadios1" value="option1">First</label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" class="option2" name="optionsRadios" id="optionsRadios2" value="option2">Second</label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" class="option3" name="optionsRadios" id="optionsRadios3" value="option3">Third</label>
                </div>
            </div>
            <div class="hide col-md-7" id="tester">
                <li class="plan">
                    <ul>
                        <li>Price: <b> 17,97 €</b>

                        </li>
                    </ul>
                </li>
                    </div>
                <div class="hide col-md-7" id="12month">
                    <li class="plan">
                        <ul>
                            <li>Price: <b> 59,88 €</b>

                            </li>
                        </ul>
                    </li>
                </div>
                <div class="hide col-md-7" id="24month">
                    <li class="plan">
                        <ul>
                            <li>Price: <b> 95,76 €</b>

                            </li>
                        </ul>
                    </li>
                </div>
            </div>
        </section>
    </div>
</div>

<强>的jQuery

$(document).ready(function () {
    $('.option1').click(function () {
        $('#12month').addClass('hide');
        $('#24month').addClass('hide');
        $('#tester').removeClass('hide');
    });
    $('.option2').click(function () {
        $('#tester').addClass('hide');
        $('#24month').addClass('hide');
        $('#12month').removeClass('hide');
    });
    $('.option3').click(function () {
        $('#tester').addClass('hide');
        $('#12month').addClass('hide');
        $('#24month').removeClass('hide');
    });
});

首选的单选按钮始终保持选中状态

3 个答案:

的 DEMO JSFiddle