Checkbox value in Hidden input field

Question

I have a problem with checkbox manipulation with jQuery. I have several fieldsets with checkboxs, and I want when the person clicks on a check the check value is added to the Hidden input of each fieldset.

I was wondering how I got this check value that was clicked.

var text1 = document.getElementById("text1");
var text  = document.getElementById("text2");

$("#radios1 .check").click(function () {
    text1.value = $(this).val();
    $(this).attr("checked");
    alert(text1.value);
});

<fieldset id="radios1">
<input class="check" type="checkbox" value="1"> <br />
<input class="check" type="checkbox" value="2">
<input type="hidden" id="text1" value="1" />

</fieldset>

<fieldset id="radios2">
<input class="check" type="checkbox" value="1"> <br />
<input class="check" type="checkbox" value="2">
<input type="hidden" id="text2" value="1" />
</fieldset>

I did a JSFIDDLE with what I have so far: https://jsfiddle.net/ejb5mgoy/

Does anyone know how to proceed?

Answer 1

You can do it like this:

$('fieldset[id^="radios"] .check').click(function() {
  $(this).closest('fieldset').find('input:hidden').val(this.value);
});

The selector fieldset[id^="radios"] selects all fieldsets whose ID starts with radios.

Then, inside the function you can use the .closest() to go to fieldset where that element is and then go look for that input hidden with .find().

This way does not interfere with the Ids of the elements, it works with N equal pieces.

jsFiddle: https://jsfiddle.net/qcnq1dyz/