在表的上一行调用clone（）方法时，如何取消选中clone（）方法中的复选框？

Question

I have one table and the JavaScript function to add and delete rows. But the problem is, when I check the checkbox and then try to add the row, the checkbox is checked for the next row. But I want an unchecked checkbox for the how many rows I will add to the table wheather it may one or more.

Answer 1

You can find the checked checkboxes and set the checked property to false

$(document).ready(function() {
  $("input.add").live('click', function() {
    var $tr = $(this).closest('tr');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    //uncheck the checked checkboxes
    $clone.find(':checkbox:checked').prop('checked', false).val('N');
    $tr.after($clone);
  });
  //since jQuery 1.7 is used use .on() for delegation
  $("#phone").on('click', 'input.delete', function() {
    //dont delete the last data row
    if ($('#phone tr').length > 3) {
      var $tr = $(this).closest('tr');
      $tr.remove();
    }
    return false;
  });


  //use event delegation
  $("#phone").on('click', 'input[name="preferred"]', function() {
    this.value = this.checked ? 'Y' : 'N'
  });
});

 $(document).ready(function() { $("input.add").live('click', function() { var $tr = $(this).closest('tr'); var $clone = $tr.clone(); $clone.find(':text').val(''); //uncheck the checked checkboxes $clone.find(':checkbox:checked').prop('checked', false).val('N'); $tr.after($clone); }); //since jQuery 1.7 is used use .on() for delegation $("#phone").on('click', 'input.delete', function() { //dont delete the last data row if ($('#phone tr').length > 3) { var $tr = $(this).closest('tr'); $tr.remove(); } return false; }); //use event delegation $("#phone").on('click', 'input[name="preferred"]', function() { this.value = this.checked ? 'Y' : 'N' }); }); 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <form name="Basicinfo" id="Basicinfo" method="post" action="Basic.html"> <table id="phone" width="100%" name="phone"> <tr> <td colspan="5" bgcolor="#5C85B3">Phone</td> </tr> <tr> <th>Type</th> <th>Country Code</th> <th>*Phone</th> <th>Preferred</th> <th>Add/Delete</th> </tr> <tr> <td> <select name="phntype" id="phntype" style="width:50%"> <!-- Phone Types --> %bind(:6); </select> </td> <td> <input type="text" name="cntrycde" id="cntrycde" value=""> </td> <td> <input type="text" name="phone_no" id="phone_no" value=""> </td> <td> <input type="hidden" name="prefferd" value="NO"> <input type="checkbox" name="preferred" id="preferred" value="N"> </td> <td> <input type="button" value="+" class="add"> <input type="button" value="-" class="delete"> </td> </tr> </table> </form> 

Answer 2

一种选择是从$clone所有复选框中删除选中的属性

$clone.find('input:checkbox').removeAttr('checked');