jQuery选择复选框时，文本存在，隐藏未选中的行从打印

jQuery Select Checkbox When Text Exists, Hide Unselected Rows from Print

本文关键字：打印 隐藏 复选框 选择 文本 存在 jQuery      更新时间：2023-09-26

我有一个动态生成的表，其中每行包含一个复选框、一些数据和一个文本输入字段。

我想在选定行的文本框中输入文本后自动检查复选框。最后，当按下"Finish"按钮时，我希望隐藏任何未选择的行，不打印。最终输出将是只包含选定行(即复选框中有复选的行)及其值的表。

下面是隐藏未选中行的css print类:

<style type="text/css" media="print">
.grid .hidden tr {
  display:none;
}
</style>

HTML:

<table id="data" class="grid">
<thead>
    <tr>
        <th>&nbsp;</th>
        <th>Part Number</th>
        <th>Description</th>
        <th>Qty to Order</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>1234</td>
        <td>Description data goes here</td>
        <td><input type="text" class="inputData"></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>3454</td>
        <td>Description data goes here</td>
        <td><input type="text" class="inputData"></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>6787</td>
        <td>Description data goes here</td>
        <td><input type="text" class="inputData"></td>
    </tr>
</tbody>
</table>
<button id="clicker">Finish</button>

最后，这里是jQuery。这是在文本字段中输入文本时选择所有复选框，而不仅仅是那一行的复选框(我不理解)，而不是将"隐藏"类分配给没有复选框的行-类根本没有被分配。

$(document).ready(function() {
//Check for input in text field
$('#data > tbody > tr').each(function() {
    $(".inputData").change(function() { 
        if ($(this).val().length > 0) {
            $(".check").prop("checked",true);
        } else {
            $("tr").addClass("hidden");
        }
    });
});
$("#clicker").click(function() {
        window.print();
        return false;
});
});

</script>

我构造这个的逻辑是为了确保我们只选择id为data的表中的行。第一个函数将遍历查看文本字段的每一行，如果该字段的长度大于0，则选中该框。否则，将类赋值为"hidden"，这将阻止它打印。最后，简单地为按钮分配一个点击事件。

感谢您的帮助。

这是一个jsFiddle

这将根据输入是否具有值来选中或取消选中适当的框:

$(".inputData").on('input', function () {
  var checkbox= $(this).closest('tr').find('[type="checkbox"]');
  checkbox.prop('checked', $(this).val());
});

不需要在each()方法中。

隐藏未选中复选框的所有行:

  $('[type="checkbox"]:not(:checked)').closest('tr').hide();

把它放在$("#clicker").click()函数中是有意义的。

更新小提琴

相关文章：