如何将选中的复选框从一个表复制到另一个表

Question

我有两个表，其中表1是表2的主表。如果我单击addnew按钮，那么将在表1和表2中都添加一个新行，无论我写什么员工姓名，它都会同时复制到表2中。 我也想将选中的输入复选框也从表1复制到表2。我添加了代码，请帮助。

  $(document).ready(function() { $("#insert66").click(function() { $(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></td> <td> <input type="checkbox" id="mandatorySub"> </td></tr>') $("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr>') }); $('.copySubName').on('input', '.EmpName', function() { var index = $(this).closest('table').find('input').index(this); //for second table $('#tableboth').find('.EmpName').eq(index).val($(this).val()) //for 3rd table }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table66" class="table table-bordered table-hover copySubName"> <input type="button" class="btn green" value="Add New+" id="insert66"></input> <thead> <th>Employee Name</th> <th> is mandatory</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr> </tbody> </table> <div class="portlet light portlet-fit box individual individualSalSection"> <div class="portlet-body individual individualSalSectionSub"> Table2: <table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual"> <thead> <th>Employee</th> <th> Marks</th> <th> is mandatory</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr> </tbody> </table> </div> </div> 

Answer 1

您应该将mandatorySub作为类使用，而不是在各处使用多个ID。 id的用法在文档中应该是唯一的。

您的目标是在复选框状态change时触发事件，并相应地选中/取消选中其他复选框。

参考代码：

 $(document).ready(function() { $("#insert66").click(function() { $(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></td> <td> <input type="checkbox" class="mandatorySub"> </td></tr>') $("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" class="mandatorySub"> </td> </tr>') }); $('.copySubName').on('input', '.EmpName', function() { var index = $(this).closest('table').find('input').index(this); //for second table $('#tableboth').find('.EmpName').eq(index).val($(this).val()) //for 3rd table }); $(document).on("change", ".mandatorySub", function() { var checkboxIndex = $(this).closest('table').find('input[type="checkbox"]').index(this) if ($(this).is(":checked")) { $('#tableboth').find('input[type="checkbox"]').eq(checkboxIndex).prop("checked", true); } else { $('#tableboth').find('input[type="checkbox"]').eq(checkboxIndex).prop("checked", false); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table66" class="table table-bordered table-hover copySubName"> <input type="button" class="btn green" value="Add New+" id="insert66" /> <thead> <th>Employee Name</th> <th> is mandatory</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td> <td> <input type="checkbox" class="mandatorySub"> </td> </tr> </tbody> </table> <div class="portlet light portlet-fit box individual individualSalSection"> <div class="portlet-body individual individualSalSectionSub"> Table2: <table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual"> <thead> <th>Employee</th> <th> Marks</th> <th> is mandatory</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" class="mandatorySub"> </td> </tr> </tbody> </table> </div> </div> 

Answer 2

您需要将id =“ mandatorySub”更改为class =“ mandatorySub1”和class =“ mandatorySub2”

我已经更新了您的代码，如果我理解正确的话，这可能会对您有所帮助

 $(document).ready(function() { $("#insert66").click(function() { $(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td><td><input type="checkbox" class="mandatorySub1"></td></tr>') $("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" class="mandatorySub2"> </td> </tr>') }); $('.copySubName').on('input', '.EmpName', function() { var index = $(this).closest('table').find('input').index(this); //for second table $('#tableboth').find('.EmpName').eq(index).val($(this).val()) //for 3rd table }); $('body').on('click','.mandatorySub1',function(){ $('input.mandatorySub2').eq($("input.mandatorySub1").index( this )).trigger('click'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table66" class="table table-bordered table-hover copySubName"> <input type="button" class="btn green" value="Add New+" id="insert66"></input> <thead> <th>Employee Name</th> <th> is mandatory</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td> <td> <input type="checkbox" class="mandatorySub1"> </td> </tr> </tbody> </table> <div class="portlet light portlet-fit box individual individualSalSection"> <div class="portlet-body individual individualSalSectionSub"> Table2: <table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual"> <thead> <th>Employee</th> <th> Marks</th> <th> is mandatory</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" class="mandatorySub2"> </td> </tr> </tbody> </table> </div> </div>