如何將選中的複選框從一個表複製到另一個表

Question

我有兩個表，其中表1是表2的主表。如果我點擊addnew按鈕，將在表1和表2中添加新行，並且無論員工姓名我會寫它會在表2中同時被複制。我想複製選中的輸入複選框也從表1到table2.I已添加我的代碼請幫助。

$(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

您需要更改類= 「mandatorySub1」 和class = 「mandatorySub2」

我已經更新您的代碼ID = 「mandatorySub」可能這會幫助你，如果我正確理解你

$(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>