I want to get names of the checked boxes in the text input field below in this format :
name1 , name2 , name3 :
<input class="iput" type="checkbox" name="E33" value="33"/> A
<input class="iput" type="checkbox" name="E34" value="33"/> B
<input class="iput" type="checkbox" name="E66" value="33"/> C
<input type="text" id="sku" name="SKU" placeholder="show names here"/>
Have tried multiple times but nothings working.
You could loop through the checkbox's using forEach and put the checked one to an array and finally join them by , :
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
// Function that will be called when anchor is clicked
Array.from(checkboxes).forEach(function(item) {
item.addEventListener("click", checkboxClick);
});
function checkboxClick() {
var checked_names = [];
Array.from(checkboxes).forEach(function(item) {
if (item.checked) {
checked_names.push(item.name);
}
});
document.getElementById('sku').value = checked_names.join(', ');
}<input class="iput" type="checkbox" name="E33" value="33" /> A
<input class="iput" type="checkbox" name="E34" value="34" /> B
<input class="iput" type="checkbox" name="E66" value="66" /> C
<input type="text" id="sku" name="SKU" placeholder="show names here" />
var cb = document.querySelectorAll('.iput');
var ip = document.getElementById('sku');
var val = [];
for(var i of cb){
i.addEventListener('change',(e)=>{
var cind = val.indexOf(e.target.name);
if(cind === -1){
val.push(e.target.name)
}else{
val.splice(cind,1)
}
ip.value = val.join(",")
})
}<input class="iput" type="checkbox" name="E33" value="33"/> A
<input class="iput" type="checkbox" name="E34" value="33"/> B
<input class="iput" type="checkbox" name="E66" value="33"/> C
<input type="text" id="sku" name="SKU" placeholder="show names here"/>You can do that with map, filter and join methods.
let checkbox = document.querySelectorAll('input[type="checkbox"]');
let input = document.querySelector('input[type="text"]');
input.value = Array.from(checkbox)
.filter(({checked}) => checked)
.map(({name}) => name).join(' , ')<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="iput" type="checkbox" checked name="E33" value="33"/> A
<input class="iput" type="checkbox" name="E34" value="33"/> B
<input class="iput" type="checkbox" checked name="E66" value="33"/> C
<input type="text" id="sku" name="SKU" placeholder="show names here"/>
input? Have you tried anything ? Where is your issue ?