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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

  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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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