4

我有多行的表，但它的行包含 3 复选框和按钮。现在，我想针对此按钮和复选框更新 db 表。但是，问题是当我单击每一行按钮时，我无法获取复选框的值。请找到下面的代码，让我知道如何根据每行上的按钮获取值。

<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" 值的隐藏值。

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

请检查并帮助我处理代码。

在此先感谢您的时间。

谢谢！罗宾

4

4 回答 4

3

使用此代码

  • 在这里工作演示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);

    });
});
于 2014-11-03T11:11:36.723 回答
0

在事件处理程序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*/
});
于 2014-11-03T10:58:00.213 回答
0

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

于 2014-11-03T10:45:30.567 回答
0

您可以使用此 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。

于 2014-11-03T10:55:36.773 回答