javascript - 如何选择具有相同类但仅在同一字段集中的复选框？

Question

所以我一直在努力解决这个问题，我将创建几个复选框组，我希望使用相同的通用类来提高效率，但我决定使用一种“评级系统”，通过选择一个其中一个字段集中的 5 个复选框将选中或取消选中其他复选框。

例如:通过选中复选框 3，1、2 和 3 将选中，但 4 和 5 将取消选中。

但是，由于我在页面上有很多字段集，它们会相互干扰。这是我在 HTML 中的内容:

<p>Example 1</p>
<fieldset id="field1">
    <input type="checkbox" name="forca" class="checkOne" />
    <input type="checkbox" name="forca" class="checkTwo" />
    <input type="checkbox" name="forca" class="checkThree" />
    <input type="checkbox" name="forca" class="checkFour" />
    <input type="checkbox" name="forca" class="checkFive" />
</fieldset>

<p>Example 2</p>
<fieldset id="field2">
    <input type="checkbox" name="destreza" class="checkOne" />
    <input type="checkbox" name="destreza" class="checkTwo" />
    <input type="checkbox" name="destreza" class="checkThree" />
    <input type="checkbox" name="destreza" class="checkFour" />
    <input type="checkbox" name="destreza" class="checkFive" />
</fieldset>

使用以下 Jquery 代码:

<script type="text/javascript">
jQuery(".checkOne").click(function() {
    jQuery('.checkOne').prop('checked', true);
    jQuery('.checkTwo').prop('checked', false);
    jQuery('.checkThree').prop('checked', false);
    jQuery('.checkFour').prop('checked', false);
    jQuery('.checkFive').prop('checked', false);
});
jQuery(".checkTwo").click(function() {
    jQuery('.checkOne').prop('checked', true);
    jQuery('.checkTwo').prop('checked', true);
    jQuery('.checkThree').prop('checked', false);
    jQuery('.checkFour').prop('checked', false);
    jQuery('.checkFive').prop('checked', false);
});
jQuery(".checkThree").click(function() {
    jQuery('.checkOne').prop('checked', true);
    jQuery('.checkTwo').prop('checked', true);
    jQuery('.checkThree').prop('checked', true);
    jQuery('.checkFour').prop('checked', false);
    jQuery('.checkFive').prop('checked', false);
});
jQuery(".checkFour").click(function() {
    jQuery('.checkOne').prop('checked', true);
    jQuery('.checkTwo').prop('checked', true);
    jQuery('.checkThree').prop('checked', true);
    jQuery('.checkFour').prop('checked', true);
    jQuery('.checkFive').prop('checked', false);
});
jQuery(".checkFive").click(function() {
    jQuery('.checkOne').prop('checked', true);
    jQuery('.checkTwo').prop('checked', true);
    jQuery('.checkThree').prop('checked', true);
    jQuery('.checkFour').prop('checked', true);
    jQuery('.checkFive').prop('checked', true);
});
</script>

正如我所说。我的问题是它可以工作，但是 Example1 会干扰 Example2。但是，有没有办法做到这一点，使 jQuery 仅在相同的字段集中工作？

Answer 1

这是一种方法:

$('#field1 input, #field2 input').click(function() {
  $(this).prop('checked', true).siblings().prop('checked', false).end().addBack().prevAll().prop('checked', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Example 1</p>
<fieldset id="field1">
  <input type="checkbox" name="forca" class="checkOne" />
  <input type="checkbox" name="forca" class="checkTwo" />
  <input type="checkbox" name="forca" class="checkThree" />
  <input type="checkbox" name="forca" class="checkFour" />
  <input type="checkbox" name="forca" class="checkFive" />
</fieldset>

<p>Example 2</p>
<fieldset id="field2">
  <input type="checkbox" name="destreza" class="checkOne" />
  <input type="checkbox" name="destreza" class="checkTwo" />
  <input type="checkbox" name="destreza" class="checkThree" />
  <input type="checkbox" name="destreza" class="checkFour" />
  <input type="checkbox" name="destreza" class="checkFive" />
</fieldset>

它的工作方式是在单击一个输入后，保持输入被选中，取消选中所有的兄弟，然后检查选中的兄弟之前的所有兄弟。同时不影响其他群体。