I have a list of checkboxes, which are loaded dynamically and what I am trying to do is collect the values of the selected checks and when I click the next button, in the next window, which is in the same HTML, show the values of the selected checks
HTML
<tbody>
<tr>
<td>
<input type="checkbox" id="especie0" name="especie" value="1" onchange="GetCheckedVal()" onclick="desactivar()">
<label for="especie0" class="ckbox ckbox-success pos-left-10">Sea bass/Dicentrarchus labrax</label>
<input type="number" min="1" max="99" maxlength="2" value="" id="cantSpecies0" name="cantSpecies" class="cantEspecies" disabled="disabled" onchange="multi()">
<input type="number" id="precio0" name="price" value=" " readonly="readonly" class="total-oculto">
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="especie1" name="especie" value="6" onchange="GetCheckedVal()" onclick="desactivar()">
<label for="especie1" class="ckbox ckbox-success pos-left-10">Sea bream/Sparus aurata</label>
<input type="number" min="1" max="99" maxlength="2" value="" id="cantSpecies1" name="cantSpecies" class="cantEspecies" disabled="disabled" onchange="multi()">
<input type="number" id="precio1" name="price" value=" " readonly="readonly" class="total-oculto">
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="especie2" name="especie" value="7" onchange="GetCheckedVal()" onclick="desactivar()">
<label for="especie2" class="ckbox ckbox-success pos-left-10">Oyster/Crassostrea gigas</label>
<input type="number" min="1" max="99" maxlength="2" value="" id="cantSpecies2" name="cantSpecies" class="cantEspecies" disabled="disabled" onchange="multi()">
<input type="number" id="precio2" name="price" value=" " readonly="readonly" class="total-oculto">
</td>
</tr>
</tbody>
This is the HTML of the checkboxes.
JavaScript
function GetCheckedVal() {
//alert('entra funcion GetCheckedVal')
$('#myDiv_especie').change(function() {
var valuesChecked = []; {
$('#myDiv_especie :checked').each(function() {
//if(valuesChecked.indexOf($(this).val()) === -1){
valuesChecked.push($(this).val());
// }
});
console.log(valuesChecked);
}
});
}
I have this JS function which collects in an array all the values of the inputs of the checkboxes that I have selected, that is, if in the previous window I have selected for example. check 1, 3 and 5
What I don't know is how to mount the corresponding function to collect the values of the selected checkboxes and display them in the next window, which I imagine would be to make a loop seeing which one is and which one is not selected and from there paint them by window.
You don't need to store them in an array, or loop through that array.
You are already making the loop with the
.each()
jQuery one, so you can print them in that same loop using.append()
so that the previous ones that you have already painted are not stepped on:I have created a div with
id="resultados"
which is where the selected checkboxes are printed, in your case it will be that container that you have hidden.I also recommend that you run it on the
click
button before doing the.show()
hidden container, so that the function is not run every time a check is selected or deselected.