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

Question

我有多行的表，但它的行cotain 3复选框和按钮。现在，我想要更新数据库表相对于此按钮和复选框。但是，问题在于，当我单击每行按钮时，我无法获得复选框的值。请找到下面的代码，并让我知道如何获得每行按钮的值。

<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> 

现在，当我点击第一行的读取复选框，然后点击提交，就应该皮卡类=“file_id的”价值的潜在价值以及这个价值。

同样，当我点击第二行提交时，它应该只取第二行中的那些复选框值，反之亦然。

请检查并帮助我解决问题。

提前感谢您的时间。

谢谢！ Robin

Answer 1

使用此代码

• 工作DEMO这里 jsFiddle

  $（函数（）{ $（ “分配”）。点击（函数（）{

  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” 将值更改为“读取”“写入”等，并且当它不为空时使用它

Answer 3

您可以使用此jQuery代码来查找与特定单击按钮和file_id对应的选中复选框的类：

$('.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')); 
    }); 
}); 

您可以使用所需的classes和file_id。

Answer 4

在事件处理程序中，this引用事件触发的元素。使用当前元素可以遍历重复元素的最高级别，在这种情况下，它将是<tr>，然后在该主元素中进行所有后续搜索。

$('.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*/ 
});