如何用jquery将勾中复选框的那一行的数据自动添加到同页面的另一个表格

Posted 2023-03-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用jquery将勾中复选框的那一行的数据自动添加到同页面的另一个表格相关的知识，希望对你有一定的参考价值。

<div id="Layer1" style="position:absolute;width:600px;height:80px;z-index:1">
<table id="createTable" class="resultlst">
<tr>
<th><input type="checkbox" id="selectAllCheck"
name="selectAllCheck">全选/全不选</th>
<th></th>
<th>工号</th>
<th>姓名</th>
<th>科室</th>
<th>角色</th>
</tr>
<c:forEach items="$showAllUserList" var="e" varStatus="index">
<tr onclick="trClick(this)">
<td><input type="checkbox" name="selectOne" id="selectOne">
</td>
<td>$index.index+1</td>
<td><input type="hidden" value="$e.deptId" />
$e.userCode</td>
<td>
<%-- <input type="hidden" value="$e.consumableExtendId"/> --%>
$e.uesrName</td>
<td>$e.deptName</td>
<td>$e.roleName</td>
</tr>
</c:forEach>
</table>

参考技术A

这个功能用到的方式就是：

①首先获得选中复选框的那一行或者多行数据，这个用，具体的代码要看你的网站结构通过jquery选择器和each循环都可以获得。

$("input:checkbox[name='the checkbox name']:checked")....

②在each循环中，把获取到的每一行，每个单元格的数据，通过jquery的append()的方法，动态创建，添加到另一个表格中即可。插入的位置可以用不同的方法，append(）是追加到后面。还有一些insertbefore()等可参见jquery文档。

如何用jquery标记模式的复选框

【中文标题】如何用jquery标记模式的复选框【英文标题】：How to mark checkbox of the modal with jquery 【发布时间】：2022-01-07 17:50:33 【问题描述】：

我正在使用引导模式和 jquery。我正在将字段拖入表单构建器，它会打开带有下面表单的模式。我想检查 id="edit-address"，如使用 jquery 打开的模式所示。我尝试了不同的方式，比如 $('#edit-address').click(); $('#edit-address').prop('checked',true);等，但这不起作用。可能是我找不到正确的选择器。

<div class="modal-dialog modal-lg">
    <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header text-center">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3 class="semibold modal-title text-primary" style="text-transform: capitalize;">Heading</h3>
        </div>
        <!-- End Modal Header -->

        <div class="modal-body pb0">
            <div class="form-group formtemplate mb0">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel form-horizontal form-bordered form-canvas" name="form-profile">
                            <div class="panel-body pt0 pb0">

                                <div class="form-group no-border">

                                    <div class="row">
                                        <div class="col-sm-6">
                                            <label for="edit-address-label" class="control-label mb5">Name:</label>
                                            <input id="edit-address-label" type="text" class="form-control fieldNames" data-option="label" placeholder="The question and name for this field..">
                                        </div>
                                        <div class="col-sm-6 mt20 pt10">
                                            <div class="checkbox custom-checkbox">
                                                <input id="edit-address-required" type="checkbox" data-option="required" value="1">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt10">

                                        <div class="row">
                                            <div class="col-sm-1 mt20 pt10">
                                                <div class="checkbox custom-checkbox">
                                                    <input class="check-address-checkbox" id="edit-address" type="checkbox" data-option="edit-address" value="1">
                                                    <label for="edit-address" checked="">Mark it</label>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

【问题讨论】：

$('#edit-address').prop(':checked',true) 这应该可以，但这不起作用，也许我无法获得选择器你有没有在我写的“checked”之前使用“:”？是的，我写过检查 ":checked"，而不仅仅是"checked" 【参考方案1】：

.click() 方法应该适用于您的情况检查控制台以查看是否有任何 jquery 问题

这是一个非常简单的例子，你可以试试：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox</title>
</head>

<body>
    <button id="btn">Tick</button>
    <div>
        <input type="checkbox" id="check"> Check
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js""></script>
        <script>
            $('#btn').click(function () 
                $('#check').click();
                console.log(" Checked");
            );</script>
    </body>
</html>

【讨论】：

【参考方案2】：

试试这个：

 $('#edit-address').attr('checked', true);

【讨论】：

欢迎来到 Stack Overflow，感谢您提供答案。您能否编辑您的答案以包括对您的代码的解释？这将有助于未来的读者更好地了解正在发生的事情，尤其是那些刚接触该语言并难以理解概念的社区成员。

以上是关于如何用jquery将勾中复选框的那一行的数据自动添加到同页面的另一个表格的主要内容，如果未能解决你的问题，请参考以下文章

jquery实现复选框打勾全选，其中一个子复选框不勾中，则不全选。所有子复选框全勾中则又全选。