Question

在示例中，我有3个单选按钮：

<input type="radio" name="reason" id="1" value="1" class="trigger reason" data-target=".safety, .hygiene, .code, .food" />
<input type="radio" name="reason" id="2" value="2" class="trigger reason" data-target=".safety, .hygiene" />
<input type="radio" name="reason" id="3" value="3" class="trigger reason" data-target=".safety, .code, .food" />

如果我单击一个单选按钮，屏幕上会显示可变数量的复选框。这段代码正在实现这一目标：

$( document ).ready(function(e) {
    var $showDiv = $('.showdiv').hide();
    $('.trigger').change(function(){
        $showDiv.hide();
        $($(this).data('target')).show();
});
});

一些复选框显示在多个单选按钮下。

我使用一些默认的bootstrap 3 jQuery方法设置了我的复选框，因此我的复选框看起来像一个带文本的按钮

<div class="hygiene showdiv col-md-2 col-sm-2">
  <label class="btn btn-block btn-primary" id="termLabel" data-toggle="buttons">
    <input type="checkbox" autocomplete="off" name="achygiene" value="1" id="achygiene"> <?php echo $lrow[13]; ?>
  </label>
</div>
<div class="safety showdiv col-md-2 col-sm-2">
  <label class="btn btn-block btn-primary" id="termLabel" data-toggle="buttons">
    <input type="checkbox" autocomplete="off" name="acsecurity" value="1" id="acsecurity"> <?php echo $lrow[13]; ?>
  </label>
</div>
<div class="defence showdiv col-md-2 col-sm-2">
  <label class="btn btn-block btn-primary" id="termLabel" data-toggle="buttons">
    <input type="checkbox" autocomplete="off" name="acdefence" value="1" id="acdefence"> <?php echo $lrow[13]; ?>
  </label>
</div>
<div class="food showdiv col-md-2 col-sm-2">
  <label class="btn btn-block btn-primary" id="termLabel" data-toggle="buttons">
    <input type="checkbox" autocomplete="off" name="acfire" value="1" id="acfire"> <?php echo $lrow[13]; ?>
  </label>
</div>

现在，当我选择一个单选按钮时，我会检查出现的复选框，但之后我看到我选择了错误的单选按钮，然后点击右边的按钮。仍检查某些复选框+当您选中复选框（不同颜色）保持活动时，由引导程序自动添加的活动状态（类）。

当我选择另一个单选按钮时，我想重置所有复选框并删除该活动类。

这是我尝试的但是不起作用

$(document).ready(function(e) {
    $("input[name=reason]:radio").click(function () {
        $('#registrationForm input:checkbox').removeAttr('checked');
        $('.showdiv label').removeClass('active');      
    });
});

有人可以帮忙吗？我不明白为什么这不起作用（我对jQuery不太好）

更改为另一个单选按钮时 - 删除课程

0 个答案: