using JavaScript function to echo checkbox table with a submit button

JSFiddle Link:

https://jsfiddle.net/so2f8ym1/

<!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

<label for="myCheck">Checkbox:</label> 
<input type="checkbox" id="myCheck">

<button name="save_multicheckbox" onclick="myFunction()" class="btn-primary">Save Checkbox</button>

<p id="text" style="display:none">Checkbox is CHECKED!</p>

<p>--------------------------</p>

<table>
 <tr>
    <th>Number</th>
    <th>Word</th>
    <th>Checkbox</th>
 </tr>
 
  <tr>
      <th><p id="row-num-1">1</p></th>
    <th><p id="row-word-1">One</p></th>
    <td><input type="checkbox" id="row-chk-1" name="ckb" onclick="chkcontrol(0)"></td>
  </tr>
  
  <tr>
      <th><p id="row-num-2">2</p></th>
    <th><p id="row-word-2">Two</p></th>
    <td><input type="checkbox" id="row-chk-2" name="ckb" onclick="chkcontrol(1)"></td>
  </tr>
  
  <tr>
      <th><p id="row-num-3">3</p></th>
    <th><p id="row-word-3">Three</p></th>
    <td><input type="checkbox" id="row-chk-3" name="ckb" onclick="chkcontrol(2)"></td>
  </tr>
  
  <tr>
      <th><p id="row-num-4">4</p></th>
    <th><p id="row-word-4">Four</p></th>
    <td><input type="checkbox" id="row-chk-4" name="ckb" onclick="chkcontrol(3)"></td>
  </tr>
 
</table>

<button name="save_multicheckbox" onclick="tableButton()" class="btn-primary">Table Button</button><br><br>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}

function tableButton() {
}
</script>

</body>
</html>

First I tried to output just one checkbox and a button to test out, this is working. I used function myFunction() to get the id myCheck in order to display a hidden text when the button is clicked.

1

What I want to do is to make a similar feature but with multiple checkboxes with multiple rows. To be honest I do not know how the syntax works in a function with multiple ids to check after submitting the button so I just want to point out my observations and what I need:

  • The button is the same as my first example but I need something to add so that only certain rows is checked will be displayed
  • After checking the checkboxes the id of those rows should be the ones that gets an output

pseudocode:

function tableButton() {
 *get id of rows with checkboxes ticked
 *display text of said rows
}

I would like to add some examples in my function tableButton() but I do not know where to begin with my code with multiple checkbox ids involved.

Any help would be appreciated.