CODEWITHSUNDEEP
javascriptjqueryhtml
Sagar Pahlajani
Sagar Pahlajani

Reputation: 45

Need to read the value of the selected Checkbox on Horizontal HTML Table

I have a table with the horizontal header and wanted to achieve to get the values of the selected checkbox. Once the checkbox gets selected it should return me the values of that column for all the rows. Here is code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
function myfunc(ele) {

 var values = new Array();
       $.each($("input[name='case[]']:checked").closest("tr").siblings("tr"),
              function () {
                   values.push($(this).text());
              });
    
       alert("val---" + values.join (", "));
 }
     

$(document).ready(function() {
    $("input.case").click(myfunc);
});
</script>
<table border="1">
<tr>
  <th>Select</th>
   <td align="center"><input type="checkbox" class="case" name="case[]" value="1"/></td>
    <td align="center"><input type="checkbox" class="case" name="case[]" value="2"/></td>
    <td align="center"><input type="checkbox" class="case" name="case[]" value="3"/></td>
    </tr>
    <tr>
    <th>Cell phone</th>
    <td>BlackBerry Bold 9650</td>
    <td>Samsung Galaxy</td>
    <td>Droid X</td>
    </tr>
    <tr>
      <th>Rating</th>
       <td>2/5</td>
       <td>3.5/5</td>
       <td>4.5/5</td>
    </tr>
    <tr>
      <th>Location</th>
      <td>UK</td>
      <td>US</td>
      <td>REB</td>
    </tr>
    </table>

Upvotes: 2

Views: 344

Answers (1)

Jimenemex
Jimenemex

Reputation: 3166

Since you include in value="n" where n is 1, 2, 3 in your html, we can use that information to get the correct columns based on your table.

You need to change your click event to the changed event for the checkbox. Once you have the change event wired, you can check if this (the checkbox) is checked with the .checked property. If it is, then get the value of that element. Then you can use jQuery to find the tr row for each column (1, 2 or 3) and get it's nth child where n would again be the value found by this.value. You now have the html of that child. Get it's html by .innerHTML. Do as you please with it.

I also added an id to your table to query it easier.

EDIT: Since you say that the data in the table is generated and your can't use value in your html. Then we can still do this by getting the current column by $(this).parent().index() and by finding the length of the children by var childrenAmt = $('#table tr').length; We can then loop from 1 to childrenAmt and get the column found by $(this).parent().index();

You can push that data into an array and return it if you'd like.

$(document).ready(function() {
    $(".case").change(function(){
        if(this.checked) { // this = the current checkbox clicked
            var index = $(this).parent().index();
            var childrenAmt = $('#table tr').length;
            var array = [];
            for(var i = 1; i < childrenAmt; i++) {
              var data = $('#table tr').eq(i).children()[index].innerHTML;
              array.push(data);
            }
            console.log(array);
            // return array // Do as you please with the values
        }

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table border="1" id="table">
<tr>
  <th>Select</th>
   <td align="center"><input type="checkbox" class="case" name="case[]"/></td>
    <td align="center"><input type="checkbox" class="case" name="case[]"/></td>
    <td align="center"><input type="checkbox" class="case" name="case[]"/></td>
    </tr>
    <tr>
    <th>Cell phone</th>
    <td>BlackBerry Bold 9650</td>
    <td>Samsung Galaxy</td>
    <td>Droid X</td>
    </tr>
    <tr>
      <th>Rating</th>
       <td>2/5</td>
       <td>3.5/5</td>
       <td>4.5/5</td>
    </tr>
    <tr>
      <th>Location</th>
      <td>UK</td>
      <td>US</td>
      <td>REB</td>
    </tr>
    </table>

Upvotes: 1

Related Questions