jQuery, how to get value of a specific checkbox in table row?

Question

I have table with multiple rows but its row cotain 3 checkbox and button. Now, I want to update db table with respect to this button and the check box. But, the problem is that I am not able to get the value of the check box when I clicked on each rows button. Please find the below code and let me know how can I get the value as per button on each row.

<table width="100%">
  <tr class="tbrow">
    <td width="12%">
      <span class="name">test.html</span>
    </td>
    <input type="hidden" value="0" class="file_id" />
    <td width="5%">
      <span class="action">
        <input type="checkbox" value="1" class="read" title="read" /> Read
      </span>
    </td>
    <td width="5%">
      <span class="action">
        <input type="checkbox" value="1" class="write" title="write" /> Write
      </span>
    </td>
    <td width="7%">
      <span class="action">
        <input type="checkbox" value="1" class="download" title="download" /> Download
      </span>
    </td>
    <td width="5%">
      <span class="action">
        <input type="checkbox" value="1" class="share" title="share" /> Share
      </span>
    </td>
    <td width="80%">
      <span class="action">
        <input type="submit" name="assign" class="assign" title="Submit" value="Submit" />
      </span>
    </td>
  </tr>
  <tr class="tbrow">
    <td width="12%">
      <span class="name">testing.doc</span>
    </td>
    <input type="hidden" value="1" class="file_id" />
    <td width="5%">
      <span class="action">
        <input type="checkbox" value="1" class="read" title="read" /> Read
      </span>
    </td>
    <td width="5%">
      <span class="action">
        <input type="checkbox" value="1" class="write" title="write" /> Write
      </span>
    </td>
    <td width="7%">
      <span class="action">
        <input type="checkbox" value="1" class="download" title="download" /> Download
      </span>
    </td>
    <td width="5%">
      <span class="action">
        <input type="checkbox" value="1" class="share" title="share" /> Share
      </span>
    </td>
    <td width="80%">
      <span class="action">
        <input type="submit" name="assign" class="assign" title="Submit" value="Submit" />
      </span>
    </td>
  </tr>
</table>

Now, When I click on read check box of first row and click submit, it should pickup this value along with the hidden value of class="file_id" value.

Similary, when I click on submit in second row, it should pickup only those checkbox value in the second row only vice versa.

Please check and help me on the code.

Thanks in advance for your time.

Thanks! Robin

Can several checkboxes be checked ? All the values are set to "1", don't you need something else, like the title ? — Flipke, Nov 03 '14 at 10:28

score 3 · Accepted Answer · edited May 03 '18 at 03:50

3

Use this Code

Working DEMO here jsFiddle

$(function () {
    $(".assign").click(function(){

        var chk = $(this).closest('tr').find('input:checkbox'); 
        var fileid=$(this).closest('tr').find('.file_id').val();
        alert("File ID : " +fileid);
        alert("read :" +chk[0].checked);
        alert("Write: " +chk[1].checked);
        alert("Download: "+ chk[2].checked);

    });
});

edited May 03 '18 at 03:50

K. Yen

193
2
14

answered Nov 03 '14 at 11:11

prog1011

3,425
3
30
57

@RobindraSingha - if answer is useful for you- give `upvote` and `accept`it .It will helps other to find out correct solutions. – prog1011 Nov 04 '14 at 05:30

score 0 · Answer 2 · answered Nov 03 '14 at 10:45

0

Checkboxes have value set to null when unchecked and "on" when checked, you need to put some logic server side to work with it because if you submit you will have a value like "1":"on" change value to "read" "write" etc and work with it when it is not null

answered Nov 03 '14 at 10:45

Charlie

177
6

This doesn't count for an answer. Such suggestion should be in a comment. – nitigyan Nov 03 '14 at 11:04
concept isn't entirely accurate. WHile in the DOM the checkboxes have value regardless of checked state. I believe you are thinking about form submittal which is different than OP issues http://jsfiddle.net/3nomstcq/ – charlietfl Nov 03 '14 at 11:06

score 0 · Answer 3 · answered Nov 03 '14 at 10:55

You can use this jQuery code to find out classes of the checked checkboxes corresponding to the specific clicked button and the file_id as well:

$('.assign').click(function(){
   console.log($(this).closest('tr').find('.file_id').val());

    $(this).closest('tr').find('input[type=checkbox]:checked').each(function(){
    console.log($(this).attr('class'));
    });
});

You can use the classes and file_id any way you want.

score 0 · Answer 4 · answered Nov 03 '14 at 10:58

Within an event handler this refers to the element the event is triggered on. Using the current element you can traverse to the highest level of the repeating elements , in this case it would be <tr> then you make all subsequent searches within that main element.

$('.assign').click(function(){
   var $row = $(this).closest('tr');
   var thisRowFileID = $row.find('.file_id').val(); 
   var thisRowCheckedCheckboxs = $row.find(':checkbox:checked');
    /* do something with collection of checked checkboxes*/
});

jQuery, how to get value of a specific checkbox in table row?

4 Answers4