如果显示在表格中，则切换复选框

Question

我有一张桌子，里面有一些rows and columns。还有一张图片代表checkbox in each row and column。基本上在单击图像时，它会选中该复选框（图像选择器）。

我想要做的是，当我单击一个图像（复选框）时，其余部分会被隐藏，再次单击它会显示其余部分（切换）。

$(document).ready(function() {
  $('.sign-reason').change(function() {
    $(this).parent('td').siblings().toggle();
  });
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <label>
          <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason">
          <img src="../../css/signs/cantilever.png" class="sign_selector" rel="{cantilever}">
        <label></label>
        </label>
      </td>
      <td>
        <label>
          <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason">
          <img src="../../css/signs/950x300.png" class="sign_selector" rel="{950x300}">
          <label></label>
        </label>
      </td>
      <td>
        <label>
          <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason">
          <img src="../../css/signs/1300x370.png" class="sign_selector" rel="{1300x370}">
          <label></label>
        </label>
      </td>
    </tr>

    <tr>
      <td>
        <label>
          <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason">
          <img src="../../css/signs/1000x300freestanding.png" class="sign_selector" rel="{1000x300fs}">
          <label></label>
        </label>
      </td>
      <td>&nbsp;</td>
      <td>
        <label>
          <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason">
          <img src="../../css/signs/1100x300.png" class="sign_selector" rel="{1100x300}">
          <label></label>
        </label>
      </td>
    </tr>
  </tbody>
</table>

当我点击image 时，是否有可能所有其他images 都被隐藏，再次点击会显示图像。

非常感谢

Answer 1

您可以使用 jquery 的 show() 和 hide() 方法。但是当我们使用它们时我们有一些奇怪的输出（它并不总是发生），为了隐藏它们，我们更改了 html 属性“display：none”并使用 show() 切换回来。当然在控制是否检查图像之后。

您可以根据您想要隐藏或显示的内容在您的按钮点击功能下创建相应的功能，并且您可以实现切换。祝你好运！

Answer 2

你可以创建一个 CSS 样式来隐藏元素并切换类。

 $(document).ready(function() {

    $('.sign-reason').change(function() {
        // here parents function will search for the parent tr, where as parent only referes to direct parent of element
        $(this).parents('td').siblings().toggleClass('hide');

    });

}); 

/* class to hide the element */
.hide{ display:none; }

Answer 3

这里有一个解决方案https://jsfiddle.net/sbkw7y3z/

$(document).ready(function() {
  $('.sign-reason').change(function() {
    $('.sign-reason').closest('label').toggle();
      $(this).closest('label').show();
  });
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="http://via.placeholder.com/350x150" class="sign_selector" rel="{cantilever}"><label></label></label></td><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="http://via.placeholder.com/350x150" class="sign_selector" rel="{950x300}"><label></label></label></td><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="http://via.placeholder.com/350x150" class="sign_selector" rel="{1300x370}"><label></label></label></td>
    </tr>

    <tr><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="http://via.placeholder.com/350x150" class="sign_selector" rel="{1000x300fs}"><label></label></label></td><td>&nbsp;</td><td><label><input name="sign-reason" type="checkbox" value="damaged" class="sign-reason"><img src="http://via.placeholder.com/350x150" class="sign_selector" rel="{1100x300}"><label></label></label></td>
    </tr>
  </tbody>
</table>

希望这会对你有所帮助。

Answer 4

试试这个简单的解决方案：

$(document).ready(function() {
  $('.sign-reason').change(function() {
    $('.sign-reason').not(this).closest("td").toggle()
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <label>1
        <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason">
        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="sign_selector" rel="{cantilever}">
        <label></label>
      </label>
    </td>
    <td>
      <label>2
        <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason">
        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66g" class="sign_selector" rel="{950x300}">
        <label></label>
      </label>
    </td>
    <td>
      <label>3
        <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason">
        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="sign_selector" rel="{1300x370}">
        <label></label>
      </label>
    </td>
  </tr>
       
  <tr>
    <td>
      <label>4
        <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason">
        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="sign_selector" rel="{1000x300fs}">
        <label></label>
      </label>
    </td>
    <td>&nbsp;</td>
    <td>
      <label>5
        <input name="sign-reason" type="checkbox" value="damaged" class="sign-reason">
        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" class="sign_selector" rel="{1100x300}">
        <label></label>
      </label>
    </td>
  </tr>
</table>