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

时间:2018-05-03 16:48:09

标签: javascript jquery html

我是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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

根据您提供的代码,当您取消第二个复选框时,警报会显示两次,这是因为第一个复选框已隐藏但不是uncheckedeach循环条件检查选中的复选框。因此,您可以取消选中该复选框并隐藏它。

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

答案 1 :(得分:-1)

复选框上的

单击

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