如何使用jQuery或JavaScript选择和取消选择复选框

我花了一个多小时找到了一个满意的答案或解决方案，但没有找到。虽然我在这里看到了一些帖子，但它们部分解决了我的问题

我的问题：我有一个表单，其中包含三个不同部分的复选框集，由radiobox选择分隔。在这里，我想实现两件事：

当用户想要选择一个部分时，他/她单击单选按钮，相应的部分应该显示，其中包含一个DIV内的复选框

现在，当用户再次单击另一个单选按钮时，我希望上一节中的复选框应被取消选中，反之亦然

最喜欢的水果？

最喜欢的颜色？

最喜欢的运动？

苹果

香蕉

芒果

黑色

橙色

蓝色

拳击

板球br/>
足球

---

我需要编写JavaScript或jQuery代码。

这里有许多您想要了解的示例。您只需要修改代码。 我已经创建了一个，我将尝试解释这个过程

首先，您有许多项具有相同的

id

。Id必须是唯一的。 其次，我添加了属性

name

，因为如果您提交表单，它会很方便

然后您需要收听单选按钮上的

change

事件

代码如下：

HTML

JS

---

我们总是很乐意帮助和支持新的程序员，但你需要先帮助自己。之后，如果您有问题，请发布您尝试过的内容，并清楚解释哪些内容不起作用，然后提供。读这本书。另外，请务必阅读我在网上搜索过的内容，但没有找到满意的答案或解决方案。感谢您的支持，如果有人问我，我会确保包括所有必需的信息。

id

属性在整个文档中应该是唯一的，这可能是您的代码无法按预期工作的原因，但您必须展示您尝试过的内容。这就是我一直在寻找的，您成就了我的一天。我刚开始使用javascript，但不知道。非常感谢您提供的伟大解决方案和有用的提示。这是一个非常有用的答案。然而，作为一个提示，因为问题没有包含任何（尝试的）JavaScript，所以它可能会关闭得太宽，即使提供了这个答案。原因是Stack Overflow社区的一部分人不想鼓励问题作者在没有先展示一些努力的情况下向我提出代码问题（OP不清楚他/她发现的代码为什么不能解决问题）.令人担忧的是，堆栈溢出有被称为可以获得免费劳动力的地方的危险（如果这种情况尚未普遍存在的话）。

<input type="radio" value="fruit" id="fruit" checked="checked" />Favorite fruit?<br/>
<input type="radio" id="color" value="color" />Favorite color?<br/>
<input type="radio" id="sport" value="sport" />Favorite sport?<br/>

<div id="fruit">
  <input type="checkbox" value="apple"> Apple<br/>
  <input type="checkbox" value="apple"> Banana<br/>
  <input type="checkbox" value="apple"> Mango<br/>
</div>

<div id="color">
  <input type="checkbox" value="black"> Black<br/>
  <input type="checkbox" value="orange"> Orange<br/>
  <input type="checkbox" value="blue"> Blue<br/>
</div>

<div id="sport">
  <input type="checkbox" value="boxing"> Boxing<br/>
  <input type="checkbox" value="cricket"> Cricketbr/>
  <input type="checkbox" value="football"> Football<br/>
</div>

<input type="radio" name="choice" value="fruit" checked="checked" />Favorite fruit?<br />
<input type="radio" name="choice" value="color" />Favorite color?<br />
<input type="radio" name="choice" value="sport" />Favorite sport?<br />

<div id="fruit">
  <input type="checkbox" value="apple"> Apple<br />
  <input type="checkbox" value="apple"> Banana<br />
  <input type="checkbox" value="apple"> Mango<br />
</div>

<div id="color">
  <input type="checkbox" value="black"> Black<br />
  <input type="checkbox" value="orange"> Orange<br />
  <input type="checkbox" value="blue"> Blue<br />
</div>

<div id="sport">
  <input type="checkbox" value="boxing"> Boxing<br />
  <input type="checkbox" value="cricket"> Cricket<br />
  <input type="checkbox" value="football"> Football<br />
</div>

div {
  display: none;
}

//listen to a change on all radio buttons with the name "choice"
$('input[name="choice"]').on('change', function() {
  var t = $(this); //save this for future reference... this is an optimisation trick if you need to access $(this) many times... in this case it's not necessary.
  $('[type="checkbox"]').prop('checked', false); //uncheck all checkboxes
  $('div').hide(); //hide all divs
  $('#' + t.val()).show(); //show the correct div which it's id is the same name as the radio's value.

});

$('[name="choice"]:checked').trigger('change'); // trigger the change on the checked item (so we have a visible div on first load).