检查输入是否检查 ONLOAD 和 ONCHANGE

Question

我的 javascript 技能欠佳，所以我不会发布我已经用 jQuery 尝试过的内容。但是，我可以说，我尝试了很多东西，但没有一个完全奏效。

场景很简单：

我有几个容器。所有这些都带有一个复选框。复选框具有动态设置的不同 ID。

这就是我想要完成的：

• 当点击里面的复选框时，容器应该使类“活动”。
• 一次检查的容器不得超过一个。使用单选按钮很简单，但要点仍然存在：一次只有一个“活动”项目。
• 当页面加载时，脚本应该检查哪个复选框被选中，并相应地将“活动”类添加到其父类。

示例代码如下：

$(document).on('change', 'input', function() {   
  if (this.checked) {
    $(this).parent('.container').addClass('active');
  } else {
    $(this).parent('.container').removeClass('active');
  }
});

.container {
  background-color: #A9CCE3;
  display: inline-block;
  margin: 4px;
  width: 200px;
  height: 120px;
}

.active {
  background: #2980B9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="container" for="item01">
  <input class="trigger" type="radio" name="grouptrigger" id="item01">
  ITEM
</label>

<label class="container" for="item02">
  <input class="trigger" type="radio" name="grouptrigger" id="item02">
  ITEM
</label>

<label class="container" for="item03">
  <input class="trigger" type="radio" name="grouptrigger" id="item03">
  ITEM
</label>

更新：发布到目前为止我为“更改”功能所做的尝试。有点想工作但没有。我从未设法为“onload”问题找到可行的解决方案。

Answer 1

只需这样做：

$( 'body' ).on( 'load', function() {
    $( 'input[type="radio"]:checked' ).parent( 'label' ).addClass( 'active' )
} )

$( 'input[name="trigger"]' ).on( 'change', function() {
    $( '.active' ).removeClass( 'active' );
    $( this ).parent( 'label' ).addClass( 'active' )
} )

.container {
    background-color: #A9CCE3;
    display: inline-block;
    margin: 4px;
    width: 200px;
    height: 120px
}
.active {
    background: #2980B9
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="container" for="item01">
    <input type="radio" name="trigger" id="item01">
    ITEM 1
</label>
<label class="container" for="item02">
    <input type="radio" name="trigger" id="item02">
    ITEM 2
</label>
<label class="container active" for="item03">
    <input type="radio" name="trigger" id="item03" checked>
    ITEM 3
</label>