javascript - jQuery Select Checkbox 当文本存在时，从打印中隐藏未选中的行

Question

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

我想在选定行的文本框中输入文本后自动选中该行的复选框。最后，当按下“完成”按钮时，我希望隐藏所有未选中的行以防止打印。最终输出将是仅包含选定行(即选中复选框的行)及其值的表格。

这是隐藏未选中行的 css 打印类:

<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 为数据的行。第一个函数将遍历查看文本字段的每一行，如果该字段的长度大于 0，则选中该框。否则，分配“隐藏”类，这将阻止它打印。最后，简单地为按钮分配一个点击事件。

非常感谢任何帮助。

这是一个 jsFiddle

Answer 1

这会根据输入是否有值来选中或取消选中相应的框:

$(".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() 函数中是有意义的。

Updated Fiddle