I have 5 html checkboxes, but every time they have different value, I want when everytime when i check or uncheck checkbox to call this js function to get all checked chexbox and add it to hiden input
This is my html
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="1" onchange="getValue(this.value)"> <input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="2" onchange="getValue(this.value)"> <input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="3" onchange="getValue(this.value)"> <input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="4" onchange="getValue(this.value)"> <input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="5" onchange="getValue(this.value)"> <input type="hidden" id="ticketsPay" name="ticketsPay" value="">
And this is my js
let myArray = (function() { let a = []; $(".checkboxes:checked").each(function() { a.push(this.value); }); return a; })() document.getElementById('ticketsPay').value = myArray.toString();
JS dont save in hidden input all checked checkbox any idea?
Advertisement
Answer
Here’s an example that uses Array.prototype.reduce and accounts only the checked
ones:
const EL_inp = document.querySelector("#ticketsPay"); const ELs_ckb = document.querySelectorAll('[name="checkbox"]'); const setChecked = () => { EL_inp.value = [...ELs_ckb].reduce((a, EL) => { if (EL.checked) a.push(EL.value); return a; }, []); }; ELs_ckb.forEach(EL => EL.addEventListener("input", setChecked));
<input type="checkbox" class="checkbox" name="checkbox" value="1"> <input type="checkbox" class="checkbox" name="checkbox" value="2"> <input type="checkbox" class="checkbox" name="checkbox" value="3"> <input type="checkbox" class="checkbox" name="checkbox" value="4"> <input type="checkbox" class="checkbox" name="checkbox" value="5"> <input id="ticketsPay" name="ticketsPay" value="" readonly>