Question

我有一个表和JavaScript函数来添加和删除行。但问题是，当我选中复选框然后尝试添加行时，将检查下一行的复选框。但是我想要一个未选中的复选框，用于表示我将添加到表中的行数，它可以是一个或多个。

Answer 1

您可以找到选中的复选框，并将checked属性设置为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'
  });
});

＆＃13;

$(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'
  });
});

＆＃13;

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

＆＃13;

Answer 2

一个选项是从$clone

中的所有复选框中删除已检查的属性

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

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

2 个答案: