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属性＆＃34; display：none＆＃34;并用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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: