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

问题描述：

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

<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

你也可以发布你的jQuery代码 – nitigyan 2014-11-03 10:26:36

可以检查几个复选框吗？所有的值都设置为“1”，你不需要别的东西，比如标题吗？ – Flipke 2014-11-03 10:28:33

@RobindraSingha - 查看答案 - 我更新了 – prog1011 2014-11-03 11:15:04

答

使用此代码

工作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); 

}); 
     });

@RobindraSingha - 如果回答对你有用 - 给'upvote'和'accept'it。它会帮助其他人找出正确的解决方案。 – prog1011 2014-11-04 05:30:57

答

复选框的值在未选中时设置为null，在选中时为“on”，因此需要放置一些逻辑服务器端来处理它，因为如果提交您将会得到类似“1”的值：“on” 将值更改为“读取”“写入”等，并且当它不为空时使用它

这不算一个答案。这样的建议应该在评论中。 – nitigyan 2014-11-03 11:04:04

您必须有50个评论来评论... – Charlie 2014-11-03 11:04:49

概念并不完全准确。无论检查状态如何，DOM中的复选框都具有值。我相信你正在考虑与OP问题不同的表单提交http://jsfiddle.net/3nomstcq/ – charlietfl 2014-11-03 11:06:21

答

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

答

在事件处理程序中，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，如何获取表格行中特定复选框的值？

相关推荐