javascript - 如果选中输入，则将类添加到 HTML 元素

Question

如果最近的 hotelObj 被选中，我想向 .form-group 添加一个类，如果 hotelObj 未被选中，我想删除该类.

我想在这里使用 css() 而不是 addClass()。

$(".form-group").click(function() {
  if ($(this).children(".hotelObj").is(":checked")) {
    $(this).css("backgroundColor", "pink");
    alert("fungiuje")
  } else {
    $(this).css("backgroundColor", "transparent");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="form-group" for="male1" style="font-weight:800;float: left;">
  <div>
    Header
    <input type="radio" value="z5" id="male1" class="hotelObj" name="hotelType" >
    </div>
  <p>something</p>
</label>

Answer 1

问题是因为您从父元素调用 children()，而您要查找的元素是孙元素。您可以使用 find() 来解决此问题，但还有一种更具语义的方法。

你可以颠倒逻辑；在单选按钮上放置一个 change 事件处理程序，并在父 .form-group 元素上设置类，如下所示:

$(".hotelObj").change(function() {
  $('.form-group').removeClass('foo');
  $(this).closest('.form-group').addClass('foo');
})

.foo {
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="form-group" for="male1" style="font-weight:800;float: left;">
  <div>
    Header
    <input type="radio" value="z5" id="male1" class="hotelObj" name="hotelType" >
  </div>
  <p>something</p>
</label>
<label class="form-group" for="male2" style="font-weight:800;float: left;">
  <div>
    Header
    <input type="radio" value="z5" id="male2" class="hotelObj" name="hotelType" >
  </div>
  <p>something</p>
</label>

如果您绝对必须使用 css() 而不是 addClass()，我强烈不建议这样做，那么您可以这样做:

$(".hotelObj").change(function() {
  $('.form-group').css('background-color', 'transparent');
  $(this).closest('.form-group').css('background-color', 'pink');
})