表-隐藏一个元素，显示另一个元素

Question

我是JavaScript的新手，我有一个问题。

我需要隐藏复选框，然后显示与内容“取消”的span。

有没有人能帮帮我？

​

$(document).ready(function() {
  // Find remove selected table rows
  $(".delete-row").click(function() {
    $('input[name="record"]').each(function() {
      if ($(this).is(":checked")) {
        if (confirm("Are you sure?")) {
          $(this).hide();
          $(this).closest('td').find('.canceled').show();
          console.log("confirmed");
        } else {
          console.log("canceled the deletion");
        }
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>First Name</td>
  <td>Last Name</td>
  <td>Address</td>
  <td>
    <input type="checkbox" name="record">
    <span class="canceled" style="visibility: hidden">Canceled</span>
  </td>
</tr>
<br />
<tr>
  <td>First Name 2</td>
  <td>Last Name 2 </td>
  <td>Address 2</td>
  <td>
    <input type="checkbox" name="record">
    <span class="canceled" style="visibility: hidden">Canceled</span>
  </td>
</tr>

<button type="button" class="btn btn-danger marginLeft20 delete-row">Cancel</button>

​

Answer 1

根据您提供的代码，当您取消第二个复选框时，警报将显示两次，这是因为第一个复选框是隐藏的，而不是unchecked，并且each循环条件将检查选中的复选框。因此，您可以取消选中该复选框并将其隐藏。

​

$(document).ready(function() {
  // Find remove selected table rows
  $(".delete-row").click(function() {
    $('input[name="record"]').each(function() {
      if ($(this).is(":checked")) {
        $(this).prop('checked', false);
        if (confirm("Are you sure?")) {
          $(this).hide();
          $(this).siblings('.canceled').css('visibility', 'visible');
          console.log("confirmed");
        } else {
          console.log("canceled the deletion");
        }
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Address</td>
    <td>
      <input type="checkbox" name="record">
      <span class="canceled" style="visibility: hidden">Canceled</span>
    </td>
  </tr>
  <br />
  <tr>
    <td>First Name 2</td>
    <td>Last Name 2 </td>
    <td>Address 2</td>
    <td>
      <input type="checkbox" name="record">
      <span class="canceled" style="visibility: hidden">Canceled</span>
    </td>
  </tr>
</table>
<button type="button" class="btn btn-danger marginLeft20 delete-row">Cancel</button>

​

Answer 2

在复选框中单击

$(this).hide();
$('span:contains("canceled")').show();