[英]Check if checkbox is checked inside table td
我正在尝试构建一个脚本,该脚本检查是否使用jQuery $each
函数选中了一个复选框。以下是HTML代码:
<tr>
<td class="categories">World</td>
<td class="category_enabled" style="float: right;">
<input type="checkbox"/>
</td>
</tr>
<tr>
<td class="categories">Economy</td>
<td class="category_enabled" style="float: right;">
<input type="checkbox"/>
</td>
</tr>
<tr>
<td class="categories">Ψυχαγωγία</td>
<td class="category_enabled" style="float: right;">
<input type="checkbox"/>
</td>
</tr>
我相信这就像(在.each()里面):
if ($("find_specific_checkbox").is(":checked")){
console.log("Checked!");
}
任何想法我该怎么做。 我正在尝试几个小时,但什么都没有。
基于您的问题和标记,我相信您打算遍历每个表行元素,并获取每行中复选框的状态。
如果是这样,我在下面创建了(1)一个代码示例和(2)一个概念验证示例,该示例可以完成您想做的事情。
$('table tr').each(function(i) {
// Cache checkbox selector
var $chkbox = $(this).find('input[type="checkbox"]');
// Only check rows that contain a checkbox
if($chkbox.length) {
var status = $chkbox.prop('checked');
console.log('Table row '+i+' contains a checkbox with a checked status of: '+status);
}
});
我已经将第一个复选框设置为checked
状态,因此您可以看到逻辑的工作方式。
$(function() { // General/modular function for status logging var checkboxChecker = function() { $('table tr').each(function(i) { // Only check rows that contain a checkbox var $chkbox = $(this).find('input[type="checkbox"]'); if ($chkbox.length) { var status = $chkbox.prop('checked'); console.log('Table row ' + i + ' contains a checkbox with a checked status of: ' + status); } }); }; // Check checkboxes status on DOMready checkboxChecker(); // Check again when checkboxes states are changed $('table tr input[type="checkbox"]').on('change', function() { checkboxChecker(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="categories">World</td> <td class="category_enabled" style="float: right;"> <input type="checkbox" checked /> </td> </tr> <tr> <td class="categories">Economy</td> <td class="category_enabled" style="float: right;"> <input type="checkbox" /> </td> </tr> <tr> <td class="categories">Ψυχαγωγία</td> <td class="category_enabled" style="float: right;"> <input type="checkbox" /> </td> </tr> </table>
您必须遍历该列中的每个复选框,然后检查是否已选中。
$(document).ready(function() { $('table [type="checkbox"]').each(function(i, chk) { if (chk.checked) { console.log("Checked!", i, chk); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <table> <tr> <td class="categories">World</td> <td class="category_enabled" style="float: right;"> <input type="checkbox" /> </td> </tr> <tr> <td class="categories">Economy</td> <td class="category_enabled" style="float: right;"> <input type="checkbox" checked /> </td> </tr> <tr> <td class="categories">Ψυχαγωγία</td> <td class="category_enabled" style="float: right;"> <input type="checkbox" /> </td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.