检查输入是否被选中 ONLOAD 和 ONCHANGE

Question

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

场景简单：

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

这就是我想要完成的：

当点击里面的复选框时，容器应该得到 class "active"。
一次最多只能托运一个集装箱。使用单选按钮很简单，但要点仍然存在：一次只有一个 "active" 项。
页面加载时，脚本应检查选中了哪个复选框，并相应地将 "active" class 添加到其父项。

示例代码如下：

$(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>

更新：发布我目前为 "change" 函数所做的尝试。有点想工作，但没有。我从未设法找到 "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>

检查输入是否被选中 ONLOAD 和 ONCHANGE

Check if input is checked ONLOAD and ONCHANGE

javascript

jquery

onchange

onload

prop