Question

目前我在不同的div中有多个单选按钮。所有单选按钮具有相同的名称，选择一个应该取消选择任何其他按钮。不知何故，radiobuttons仅在其列中链接。我该如何解决这个问题？

<div class="form-group">

<!-- links -->
<div class="col-xs-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Afvallen</h3>
        </div>
        <div class="panel-body" style="text-align: center;">
            <div class="btn-group-vertical" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="radio" name="goal" value="goal-min-15"> -15% (Aanbevolen)
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="goal" value="goal-min-20"> -20% (Agressief)
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="goal" value="goal-min-25"> -25% (Extreem)
                </label>
            </div>
        </div>
    </div>
</div>

<!-- midden -->
<div class="col-xs-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Op gewicht blijven</h3>
        </div>
        <div class="panel-body" style="text-align: center;">
            <div class="btn-group-vertical" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="radio" name="goal" value="goal-0"> +/- 0% (Standaard)
                </label>
            </div>
        </div>
    </div>
</div>

<!-- rechts -->
<div class="col-xs-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Aankomen</h3>
        </div>
        <div class="panel-body" style="text-align: center;">
            <div class="btn-group-vertical" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="radio" name="goal" value="goal-plus-5"> +5% (Voorzichtig)
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="goal" value="goal-plus-10"> +10% (Standaard)
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="goal" value="goal-plus-15"> +15% (Agressief)
                </label>
            </div>
        </div>
    </div>
</div>

Answer 1

为每个标签添加了.goal类，并且一些jQuery完成了这个技巧

$('.goal').click(function(){
  $('.goal').removeClass("active");
  $(this).addClass("active");
});

在不同的div中链接具有相同名称的多个单选按钮

1 个答案: