Question

我写了下面代码行的html。

<div class="form-group">

    <div class="i-checks">
       <label class="col-sm-6 control-label"> 
         <div class="iradio_square-green" style="position: relative;">
         <input type="radio" value="name" name="checkchoice" style="position: absolute; opacity: 0;">
         <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>
         </div>
         Name
        </label>
     </div>

     <div class="i-checks">
       <label class="col-sm-6 control-label"> 
         <div class="iradio_square-green" style="position: relative;">
         <input type="radio" value="rollno" name="checkchoice" style="position: absolute; opacity: 0;">
         <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>
         </div>
         Roll No
        </label>
     </div>

</div>

现在我希望如果有人在相应的div中选择任何单选按钮 <div class="iradio_square-green" style="position: relative;">“已检查”类应添加为<div class="iradio_square-green checked" style="position: relative;">

我试过了

$(document).ready(function () {
  $(':radio').change(function () {
    $(':radio[name=' + this.name + ']').parent().removeClass('checked');
    $(this).parent().addClass('checked');
  });
});

无效

Answer 1

你可以用纯CSS做到这一点，不需要JS（如果造型是你唯一的目标）

CSS：

input[type=checkbox]:checked ~ div {
    some styles....
}

理想情况下，您将使用类名而不是上面的标记名。

如何根据在其中选择的单选按钮将类添加到div？

1 个答案: