单选按钮和复选框问题答案

【问题标题】：Radio button and checkbox problems单选按钮和复选框问题
【发布时间】：2013-11-18 07:20:29
【问题描述】：

我有这段代码：

<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/ 如果我不点击单选按钮，我的父框将选择新课程。只有在检查收音机时我才想要这个。如果单选按钮丢失了检查，请删除该类。 See the jsFiddle here

2/ 使用复选框，它不起作用，因为如果我单击另一个复选框，第一个会丢失新类。 See the jsFiddle here

你能帮帮我吗？

谢谢。

【问题讨论】：

我发誓我今天早些时候看到了这个问题。无论如何，你不想要单选按钮，而不是复选框吗？
我两者都需要。是的，我稍微改变了我的问题，使其更具可读性。
这就是你想要的jsfiddle.net/j08691/3qAQV
看一看：jsfiddle.net/Mxwyp/1它正在做你想做的事
感谢 MatRt 和 j08691。

标签： jquery checkbox radio

【解决方案1】：

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

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

【讨论】：

谢谢它解决了我的第一个问题。您对第二点有什么建议吗？
这完全取决于你如何设置页面中的HTML，如果结构相同，则只需将$('input[type=radio]')更改为$('input[type=radio], input[type=checkbox]')

【解决方案2】：

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

看看：this example它正在做你想做的事

【讨论】：

谢谢。如何合并两个脚本（案例 1 和 2）？
我不明白你需要“合并”。我的示例使用允许您检查多个条目的复选框。 @j08691 的示例使用单选按钮，允许您仅选择一个条目。所以，你只需要选择你想要的解决方案。