JSFiddle - React, Tailwind, and code Playground
HTML
<form><input id="1" type="checkbox" name="pr" /> Password Reset<br />
<input id="2" type="checkbox" name="ps" /> Password Setup<br />
<input id="3" type="checkbox" name="fu" /> Firmware Upgrade (if applicable)<br />
<input id="4" type="checkbox" name="la" /> Local Access Setup<br />
<input id="5" type="checkbox" name="ra" /> Remote Access Setup<br />
<input id="6" type="checkbox" name="ma" /> Mobile Access Setup<br />
<input id="7" type="checkbox" name="rss" /> Recording Schedule Setup<br />
<input id="8" type="checkbox" name="pb" /> How to playback video<br />
<input id="9" type="checkbox" name="cv" /> How to convert video<br />
<input id="10" type="checkbox" name="en" /> Email Notification Setup<br />
<input id="11" type="checkbox" name="ptz" /> PTZ Setup (if applicable)<br />
<input type="hidden" id="chcbx" value=""/>
</form>
JavaScript
var arr = [];
remove_item = function(arr,value){
for(b in arr ){
if(arr[b] == value){
arr.splice(b,1);
break;
}
}
return arr;
}
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].getAttribute('type') == 'checkbox')
{ inputs[i].addEventListener("change",function() {
if(this.checked)
arr.push(parseInt(this.id));
else
{
remove_item(arr,parseInt(this.id));
}
console.log(arr); document.getElementById("chcbx").value = arr.join(",");
},false);
}
}