LeonVFX LeonVFX - 5 months ago 9
Javascript Question

How to select checkboxes with same classes, but only inside the same Fieldset?

So I've been struggling with this issue where I am going to create several checkbox groups which I wish to use the same general classes for efficiency, but I decided to use a kind of "Rating System" where by selecting the one of the 5 checkboxes from one of the fieldsets would check or uncheck the other checkboxes.

Ex: By checking the 3 checkbox, 1, 2, and 3 would check, but 4 and 5 would uncheck.

However, since I have many fieldsets on the page, they aare interfering with each other. This is what I have in 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>


With the following Jquery code:

<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>


So as I said. My problem is that it works, however, Example1 interfers with Example2. Is there a way to do that, however, making the jQuery only work within the same Fieldsets?

Answer

Here's one way:

$('#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>

The way it works is upon clicking an input, the keeps the input checked, unchecks all the siblings, then checks all the siblings that come before the one checked. While not affecting other groups.