如何选择具有相同类的复选框,但只能在同一个Fieldset中？

Question

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

例如:通过选中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只能在相同的Fieldsets中工作？

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>

它的工作方式是点击输入,保持输入检查,取消检查所有兄弟姐妹,然后检查所有兄弟姐妹在检查之前.虽然不影响其他群体.