Question

我的javascript技能低于标准，所以我不会发布我已经尝试过的jQuery。但是，我可以说，我已经尝试了很多东西而没有任何工作完全正常。

场景很简单：

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

这就是我想要完成的事情：

容器应该上课＆＃34;活跃＆＃34;单击内部复选框时。
一次只能检查一个容器。使用单选按钮很简单，但重点仍然是：只有一个＆＃34;活动＆＃34;项目一次。
当页面加载时，脚本应该检查选中了哪个复选框，然后添加＆＃34; active＆＃34;因此，将其归类为其父级。

以下是示例代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

更新：发布我迄今为止所做的更改＆＃34;更改＆＃34;功能。有点想工作，但没有。我从来没有设法为＆＃34; onload＆＃34;问题

Answer 1

只需这样做：

＆＃13;

$( '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' )
} )

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: