How to get multiple checkbox values with loop in javascript?

Question

I am trying to get selected checkbox values under different categories,if it is checked. I have code below:

   <table>
                <tr>
                    <th colspan="2">Part A</th>
                    <th colspan="2">Part B</th>
                </tr>
                <tr>
                    <td >
                        <input class="checkbox" type="checkbox" id="chkbox_a1" name="PartA"></td>
                    <td  class="style6">A1</td>
                    <td >
                        <input  class="checkbox" type="checkbox" id="chkbox_b1" name="PartB"></td>
                    <td class="style6" >B1</td>
                </tr>
                 <tr>
                    <td >
                        <input class="checkbox" type="checkbox" id="chkbox_a2" name="PartA"></td>
                    <td  class="style6">A2</td>
                    <td >
                        <input  class="checkbox" type="checkbox" id="chkbox_b2" name="PartB"></td>
                    <td class="style6" >B2</td>
                </tr>
                 <tr>
                    <td >
                        <input class="checkbox" type="checkbox" id="chkbox_a3" name="PartA"></td>
                    <td  class="style6">A3</td>
                    <td >
                        <input  class="checkbox" type="checkbox" id="chkbox_b3" name="PartB"></td>
                    <td class="style6" >B3</td>
                </tr>
                 <tr>
                    <td >
                        <input class="checkbox" type="checkbox" id="chkbox_a4" name="PartA"></td>
                    <td  class="style6">A4</td>
                    <td >
                        <input  class="checkbox" type="checkbox" id="chkbox_b4" name="PartB"></td>
                    <td class="style6" >B4</td>
                </tr>                
</table>

and javascriot code as follows:

<script type="text/javascript">
    function save() {        
        var checkboxPartA;
        var checkboxPartB;
        var ChkboxPartA_value = document.getElementsByName('PartA');        
        for (var checkbox in ChkboxPartA_value) {
            if (checkbox.checked)
                checkboxPartA = checkbox.value.append(checkbox.value + ' , ');            
        }
        
         var ChkboxPartB_value = document.getElementsByName('PartB');      
        for (var checkbox1 in ChkboxPartB_value) {
            if (checkbox1.checked)
                checkboxPartB = checkbox1.value.append(checkbox.value + ' , ');            
        }
    }
    </script>

My sample image aas follows:

I want my output as checkboxPartA = a1,a2 //if a1,a2 checkbox is checked.. and same for part B too.

Some how, my code is not working, function triggered, but it doesn't return any value for the checkbox.

(As of now, Im checking whether I can get all checkbox values or not only before saving, but I didn't get any values.)

Kindly help to fix this issue.

Don't use for...in... for arrays or array-like structures like the NodeList returned by .getElementsByName(). checkbox/checkbox1 in your example won't be an <input /> element. — Andreas
– Andreas, Commented Nov 17, 2021 at 8:14
@Andreas so how to fix this? what I need to use instead of for..in — Riya
– Riya, Commented Nov 17, 2021 at 8:19
for...of is like for...in but for arrays. myList.forEach() can also be useful. — Cat
– Cat, Commented Nov 17, 2021 at 8:37

Benny Yen · Accepted Answer · 2021-11-17 08:49:22Z

2

First, change your for...in loop to normal for loop

for (var i=0; i<ChkboxPartA_value.length; i++) {
  var checkbox = ChkboxPartA_value[i];
  if (checkbox.checked)
    checkboxPartA = checkbox.value.append(checkbox.value + ' , ');            
}

Second, in your case, the checkbox value is a String and there is no append method in String, you can use concat.

The default value for the checkbox is 'on', you have to set checkbox value to 'a1', 'a2', etc.

check out: checkbox.value

checkboxPartA = checkboxPartA.concat(checkbox.value + ' , ');  

// or

checkBoxPartA += checkbox.value + ',';

answered Nov 17, 2021 at 8:49

Benny Yen

1181 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cat · Accepted Answer · 2021-11-17 10:28:29Z

Here's a way to write it without (mis)using the table element, and using arrays to collect your checkbox-related information. Note that checkbox elements don't have a useful value unless you set one. See the in-code comments for further explanation of how everything works.

// Identifies some DOM elements
const
  container = document.getElementById("container-div"),
  checkboxes = container.getElementsByClassName("checkbox"),
  saveBtn = document.getElementById("save-btn");

// Calls `save` whenever user clicks button
saveBtn.addEventListener("click", save);


// Defines click listener
function save(event) {
  const values_A = [], values_B = []; // Arrays to hold collected info

  // Loops through checkboxes
  for (const checkbox of checkboxes) {

    // Collects relevant text if checkbox is checked
    if (checkbox.checked) {
      if (checkbox.classList.contains("PartA")) {
        values_A.push(checkbox.value);
      }
      else if (checkbox.classList.contains("PartB")) {
        values_B.push(checkbox.value);
      }
    }
  }
  // Prints results to the browswer console (converting arrays to strings)
  console.log("PartA:", values_A.join(", ") || "(No boxes checked)");
  console.log("PartB:", values_B.join(", ") || "(No boxes checked)");
  console.log("");
}

span, label { display: inline-block; width: 5em; }
    /* inline-block elements can have a fixed width */
#button-div { margin-top: 1em; }

<div id="container-div">
  <div>
    <span>Part A</span>
    <span>Part B</span>
  </div>
  <div>
    <label><input class="checkbox PartA" type="checkbox" value="A1">A1</label>
    <label><input class="checkbox PartB" type="checkbox" value="B1">B1</label>
  </div>
  <div>
    <label><input class="checkbox PartA" type="checkbox" value="A2">A2</label>
    <label><input class="checkbox PartB" type="checkbox" value="B2">B2</label>
  </div>
  <div>
    <label><input class="checkbox PartA" type="checkbox" value="A3">A3</label>
    <label><input class="checkbox PartB" type="checkbox" value="B3">B3</label>
  </div>
  <div id="button-div">
    <button id="save-btn">SAVE</button>
  </div>
</div>

Riya · Accepted Answer · 2021-11-22 11:36:57Z

Thank you @Benny Yen and @Cat.. Though I used both your answer, I still didn't get exact output what I am expecting, so I combined both your answers and finally get a new answer. for BEnny one, concat,append nothing works for me, and I need loop so, I used your loop and followed Cat code to push data into variable.

Here is my answer that I got output as expected:

    var PartA_value = document.getElementsByName('PartA');
    var PartB_value = document.getElementsByName('PartB');
    
     var checkboxA = [], checkboxB = [];
var A_val, B_val;
     
     
            for (var i = 0; i < PartA_value.length; i++) {
                var checkbox1 = PartA_value[i];
                if (checkbox1.checked)
                    checkboxA.push(checkbox1.value);   
            }      
            for (var i = 0; i < PartB_value.length; i++) {
                var checkbox1 = PartB_value[i];
                if (checkbox1.checked)
                    checkboxB.push(checkbox1.value);
            }
A_val=checkboxA.join(",")
B_val=checkboxB.join(",")

Thank you all for your help and apologize for late reply.

Collectives™ on Stack Overflow

How to get multiple checkbox values with loop in javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related