Getting values from checkboxes - javascript

Question

I have a problem getting values from checkbox fields, I tried this method but it only works on radio type fields.

 function writee(){ var x = document.forms["formz"].music.value oo=window.open(" ","tab","width=300,height=350") oo.document.open() oo.document.write(x) }

 <form name="formz"> What music do you prefer: <input type="checkbox" name="music" value="rock" > Rock <input type="checkbox" name="music" value="techno"> Techno <input type="checkbox" name="music" value="pop"> Pop </form> <button onclick="writee()">button</button>

Answer 1

 function writee(){ var markedCheckbox =document.querySelectorAll('input[type="checkbox"]:checked'); let checkedValues = ''; for (var checkbox of markedCheckbox) { checkedValues += checkbox.value + ' '; } console.log(checkedValues); // oo=window.open(" ","tab","width=300,height=350") // oo.document.open() // oo.document.write(x) }

 <form name="formz"> What music do you prefer: <input type="checkbox" value="rock" > Rock <input type="checkbox" value="techno"> Techno <input type="checkbox" value="pop"> Pop </form> <button onclick="writee()">button</button>

Answer 2

 function writee() { var checkboxes = Array.from(document.forms["formz"].music); var checked = checkboxes.filter((item) => item.checked); const values = checked.map((item) => item.value); console.log(values); }

 <form name="formz"> What music do you prefer: <input type="checkbox" name="music" value="rock" /> Rock <input type="checkbox" name="music" value="techno" /> Techno <input type="checkbox" name="music" value="pop" /> Pop </form> <button onclick="writee()">button</button>

I just modified it a little bit.

1. Get all the related checkbox from form using form key
2. Convert them to Javascript array using Array.from() so that we can use array methods
3. Filter all the checkbox that are checked
4. Get the values of checked checkbox and log it. (you can use these values according to your own need

i hope this will answer the question