how to get value of checkbox in table in javascript

Question

I need to get the value of a checkbox provided with span in table rows. The code below is part of my project. The HTML code is for dynamic my table and javascript code is for getting the value of elements which does not work for the checkbox (it works for other input elements).

my table:

var html = '<tr class="rows" id="r'+row_id+'" style="">';
html += '<td><input type="text" id = "abc" style="height:30px" class="rtl form-control" size="20" name="" /></td>';
html += '<td><input type="text" style="height:30px" class="rtl form-control" size="25" name="" /></td>';
html += '<td style="text-align: center;">'+
'<label class="switch switch-label switch-pill switch-primary switch-sm" style="direction:ltr;">'+
'<input type="checkbox" value="1" data-size="mini" class="switch-input">'+
'<span class="switch-slider" data-checked="✓" data-unchecked="✕" unchecked></span></label>'+
'</td>'+
'<td><button class="btn btn-warning DT_action_minus" id="btn'+row_id+'" style="height:25px;width:25px;padding:0px;" href="#" title="delete">'+
'<i class="fa fa-minus" style="align:center" aria-hidden="true"></i></button></td>'+
'</tr>';

getting the values:

var tbl = document.getElementById('descriptive-table');
var rCount = tbl.rows.length;
var cCount = 3;
var allArray = [];
for (var i = 1; i <rCount; i++){
    var rowArray = [];
    for (var j = 0; j <cCount; j++){                            
        rowArray.push(tbl.rows[i].cells[j].children[0].value);
    }
    allArray.push(rowArray);
}
console.log(allArray);

yes, but there is an input inside it. I need its value if it is checked or not. — Farzaneh Jouyandeh
– Farzaneh Jouyandeh, Commented May 25, 2019 at 9:06

Shane_IL · Accepted Answer · 2019-05-25 09:11:38Z

1

To get the value of a checkbox you need to evaluate the "checked" attribute not the value:

tbl.rows[i].cells[j].children[0].checked <--- true or false

Also just a tip, when you're using a really big block of html in javascript, use template literals ( these ---> ``). They let you write multi line strings which is just a lot more readable, e.g.:

const myHMTLBlock = `
  <div>
     <span></span>
  <div/>
`

answered May 25, 2019 at 9:11

Shane_IL

3451 gold badge5 silver badges18 bronze badges

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

1 Comment

Farzaneh Jouyandeh Over a year ago

I changed my code like this and it returns undefined!! ` for (var i = 1; i <rCount; i++){ var rowArray = []; for (var j = 0; j <cCount; j++){ if (j != 2){ rowArray.push(tbl.rows[i].cells[j].children[0].value); } else{ rowArray.push(tbl.rows[i].cells[j].children[0].checked); } } allArray.push(rowArray); } `

Cherik · Accepted Answer · 2019-05-25 09:08:10Z

0

you can't access the value of checkbox by .value.
it accessible with .checked .
so you should check the type of children. if it's not equal to check box push value but if it's equal to "checkbox" you should push checked.
feel free if you need more description.

answered May 25, 2019 at 9:08

Cherik

4825 silver badges12 bronze badges

Comments

Farzaneh Jouyandeh · Accepted Answer · 2019-05-26 05:18:19Z

0

I fixed it like this and it works for me:

$('.en-ajax-button').on('click', function(e){
     var tbl = document.getElementById('descriptive-table');
     var rCount = tbl.rows.length;
     var cCount = 3;
     var allArray = [];
     for (var i = 1; i <rCount; i++){
          var rowArray = [];
          for (var j = 0; j <cCount; j++){
              if (j != 2){
                   rowArray.push(tbl.rows[i].cells[j].children[0].value);
              } 
              else{
                   rowArray.push(tbl.rows[i].cells[j].children[0].children[0].checked);
              }
          }
          allArray.push(rowArray);
    }
    console.log(allArray);
});

answered May 26, 2019 at 5:18

Farzaneh Jouyandeh

512 silver badges6 bronze badges

Comments

Kishor · Accepted Answer · 2022-06-25 07:33:43Z

Angular Version 13

Here Is my working Code..

 Declare First...
 lang_array: any[] = [];
 lang_values:any={};

If CheckBox Is Selected Then Output Will Be true OtherWise false.

**My Table In HTML File**

    <div class="table-responsive">
                  <table class="table table-hover table-bordered table-striped" (change)="CheckBox($event)">
                    <thead>
                      <tr>
                        <th scope="col">Language</th>
                        <th scope="col">Speak</th>
                        <th scope="col">Write</th>
                        <th scope="col">Read</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr >
                        <th>Marathi</th>
                        <td><input value="marathi_speak" type="checkbox"></td>
                        <td><input value="marathi_write" type="checkbox"></td>
                        <td><input value="marathi_read" type="checkbox"></td>
                      </tr>
                      <tr>
                        <th>Hindi</th>
                        <td><input value="hindi_speak" type="checkbox"></td>
                        <td><input value="hindi_write" type="checkbox"></td>
                        <td><input value="hindi_read" type="checkbox"></td>
                      </tr>
                      <tr>
                        <th>English</th>
                        <td><input value="english_speak" type="checkbox"></td>
                        <td><input value="english_write" type="checkbox"></td>
                        <td><input value="english_read" type="checkbox"></td>
                      </tr>
                    </tbody>
                  </table>
                </div>


My Code In .ts File

  CheckBox(e: any) {
console.log(e.target.attributes[1].value);
if(e.target.attributes[1].value)
{ 
  if( this.lang_array.includes(e.target.attributes[1].value))
  {
    console.log("value exist");
    const index=this.lang_array.indexOf(e.target.attributes[1].value);
    console.log(index);
    if(index>-1)
    {
      this.lang_array.splice(index,1)
      this.lang_values=this.lang_array;
      console.log("Language values",this.lang_values);  
      const marathi_values=
      {
        marathi_speaks:this.lang_values.includes("marathi_speak"),
        marathi_write:this.lang_values.includes("marathi_write"),
        marathi_read:this.lang_values.includes("marathi_read"),
      }
      console.log("marathi_values",marathi_values);  
      const hindi_values=
      {
        hindi_speaks:this.lang_values.includes("hindi_speak"),
        hindi_write:this.lang_values.includes("hindi_write"),
        hindi_read:this.lang_values.includes("hindi_read"),
      }
      console.log("Hindi_values",hindi_values);
      const english_speak=
      {
        english_speak:this.lang_values.includes("english_speak"),
        english_write:this.lang_values.includes("english_write"),
        english_read:this.lang_values.includes("english_read"),
      }
      console.log("English_values",english_speak);
    }
  }
  else {
    this.lang_array.push(e.target.attributes[1].value);
    this.lang_values=this.lang_array;
    console.log(this.lang_values);
    const marathi_values=
    {
      marathi_speaks:this.lang_values.includes("marathi_speak"),
      marathi_write:this.lang_values.includes("marathi_write"),
      marathi_read:this.lang_values.includes("marathi_read"),
    }
    console.log("marathi_values",marathi_values);
    const hindi_values=
    {
      hindi_speaks:this.lang_values.includes("hindi_speak"),
      hindi_write:this.lang_values.includes("hindi_write"),
      hindi_read:this.lang_values.includes("hindi_read"),
    }
    console.log("Hindi_values",hindi_values);
    const english_speak=
    {
      english_speaks:this.lang_values.includes("english_speak"),
      english_write:this.lang_values.includes("english_write"),
      english_read:this.lang_values.includes("english_read"),
    }
    console.log("English_values",english_speak);
  }
}
else{
  console.log("next Block");
}

}

Collectives™ on Stack Overflow

how to get value of checkbox in table in javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related