jquery - 单选按钮和复选框问题

Question

我有这段代码：

<div class="grey-bg box-top-fix">
  <h4>Item 1</h4>
  <p class="muted-small tempos">From 40 $</p>
  <div class="aboutsocial">
    <label class="radio">
      <input type="radio" name="ws_type" value="1">
      Choose this option </label>
  </div>
</div>

我希望能够将这个类（grey-bg-selected）添加到我的第一个（带有 gray-bg box-top-fix 类的那个）中。

我使用这段代码：

$(document).ready(function() {
  $('.grey-bg').click(function() {
      $('.grey-bg').removeClass('grey-bg-selected')
      $(this).addClass('grey-bg-selected')
  });
});

我有两个问题：

1/ 如果我不点击单选按钮，我的父框将选择新课程。只有在检查收音机时我才想要这个。如果单选按钮丢失了检查，请删除该类。 在这里查看 jsFiddle

2/ 使用复选框，它不起作用，因为如果我单击另一个复选框，第一个会丢失新类。 在这里查看 jsFiddle

请你帮助我好吗 ？

谢谢。

Answer 1

在第二次单击复选框时，第一次丢失了类，因为您正在删除所有区域的类$('.grey-bg').removeClass('grey-bg-selected')

看看：this example It's doing what you want I think

Answer 2

我真的不明白您何时希望添加该类，但如果是单击单选按钮时，请尝试以下操作：

$(document).ready(function() {
  $('input[type=radio]').click(function() {
      $('.grey-bg').removeClass('grey-bg-selected')
      $(this).parents('.grey-bg').addClass('grey-bg-selected')
   });
});