jQuery，如何获取表行中特定复选框的值？

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

Answer 1

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); }); }); 

Answer 2

复选框的值在未选中时设置为null，在选中时设置为“ on”，您需要放置一些逻辑服务器端来使用它，因为如果提交，您将拥有一个类似“ 1”的值：“ on”将值更改为“ read” “写”等并在不为null时使用它

Answer 3

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.

Answer 4

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*/
});