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>

现在，当我点击第一行的“读取”复选框并单击“提交”时，它应该拾取此值以及class =“file_id”值的隐藏值。

类似地，当我点击第二行中的提交时，它应仅拾取第二行中的复选框值，反之亦然。

请检查并帮我解释代码。

提前感谢您的时间。

谢谢！罗宾

Answer 1

使用此代码

在这里工作DEMO 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，并且＆＃34; on＆＃34;如果选中，你需要放置一些逻辑服务器端来使用它，因为如果你提交，你将有一个类似＆＃34; 1＆＃34;：＆＃34; on＆＃34; 将值更改为＆＃34;读取＆＃34; ＆＃34;写＆＃34;等等，当它不为空时使用它

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

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

4 个答案: