隐藏基于复选框的显示 Div答案

【问题标题】：Hide Show Div Based On Tick Box隐藏基于复选框的显示 Div
【发布时间】：2019-09-16 00:35:30
【问题描述】：

我有一个基于按钮点击隐藏和显示的 div。这非常有效，但我希望能够根据是否选中复选框来执行此操作。

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  </head> 
  <body>
    <div id="box" class="box">
      <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
        <tbody>
          <tr>
            <td>test text</td>
            <td>1</td>
          </tr>
          <tr>
            <td>in dummy</td>
            <td>2</td>
          </tr>
          <tr>
            <td>table</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>    
    </div>
    <button>TOGGLE VISIBILITY</button>
    <input type="checkbox" id="2" name="display" value="Y">
    <script>
      try {
        var box = $('#box');
    
        $('button').on('click', function() {
          if (box.hasClass('hidden')) {
             box.removeClass('hidden');
             setTimeout(function() {
               box.removeClass('visuallyhidden');
             }, 20);
          } else {
             box.addClass('visuallyhidden');
             box.one('transitionend', function(e) {
               box.addClass('hidden');
             });
          }
        });
      } catch (error) {
         throw error;
      }
    </script>
  </body>
</html>

此示例查看按钮，但我希望它引用复选框的状态

【问题讨论】：

您的按钮在上面给出的示例中似乎没有做任何事情。我想你忘了添加相关的 CSS 类。
这可能就是你要找的stackoverflow.com/questions/3442322/…

标签： javascript

【解决方案1】：

 $(document).ready(function(){




$("#mycheckbox").on( "click", function(){
            if($(this).prop("checked")){
                $(".box").show();
            }else{
                $(".box").hide();
            }
        } );

    });

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>

<body>
  <div id="box" class="box">
    <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
      <tbody>
        <tr>
          <td>test text</td>
          <td>1</td>
        </tr>
        <tr>
          <td>in dummy</td>
          <td>2</td>
        </tr>
        <tr>
          <td>table</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>

  </div>
  <button>TOGGLE VISIBILITY</button>
  <input type="checkbox" id="mycheckbox" name="display" value="Y">
  <script type="text/javascript">
   
  </script>
</body>

</html>

试试这个代码希望这是你的要求

【讨论】：

谢谢，但我已经有一个这样的版本。我想保留的关键区别是过渡，而不仅仅是隐藏/显示

【解决方案2】：

您可以在单击时将事件侦听器添加到您的复选框并确定它是否已被选中（纯 javascript）：

//Grab box
let box = document.getElementById("box");
// Add event listener to checkbox
let checkbox = document.getElementById("2");
checkbox.addEventListener("click", function() {
  // Get the checkbox
  var checkBox = document.getElementById("2");
  if (checkBox.checked == true) {
    //When checked:
    box.classList.remove("hidden");

    //Add whatever code you require:

    /*
    if (box.hasClass('hidden')) {
      box.removeClass('hidden');
      setTimeout(function() {
        box.removeClass('visuallyhidden');
      }, 20);
    } else {
      box.addClass('visuallyhidden');
      box.one('transitionend', function(e) {
        box.addClass('hidden');
      });*/


  } else {
    //When unchecked:
    box.classList.add("hidden");
  }
});

.box {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.3s, max-height 0.6s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: max-height 0.3s, opacity 0.3s, visibility 0.3s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="box" class="box">
  <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
    <tbody>
      <tr>
        <td>test text</td>
        <td>1</td>
      </tr>
      <tr>
        <td>in dummy</td>
        <td>2</td>
      </tr>
      <tr>
        <td>table</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>

</div>
<button>TOGGLE VISIBILITY</button>
<input type="checkbox" id="2" name="display" value="Y">

这将允许委托事件（因此具有相同先决条件的动态添加的复选框将继承相同的事件）。

或者你可以使用 jQuery 来做到这一点：

//Bind event listener to the checkbox:
$("body").on("click", "input[type=checkbox]#2", function() {
  //When the checkbox has been checked
  if ($(this).prop("checked")) {
    //Added slow to give an example how to add a transition using jQuery only
    $(".box").show("slow");
  }
  //When the checkbox has been unchecked:
  else {
    $(".box").hide("slow");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="box" class="box">
  <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
    <tbody>
      <tr>
        <td>test text</td>
        <td>1</td>
      </tr>
      <tr>
        <td>in dummy</td>
        <td>2</td>
      </tr>
      <tr>
        <td>table</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>

</div>
<button>TOGGLE VISIBILITY</button>
<input type="checkbox" id="2" name="display" value="Y">

【讨论】：

谢谢，但我已经有了它的一个版本，只是简单地隐藏/显示。我想保留的主要区别是过渡效果，而不仅仅是隐藏/显示
除了您提供的无效代码之外，您没有提及任何有关转换的内容。请参阅我的编辑以获取快速示例@user1879185
我为这两个脚本的基本 javascript 版本添加了更高级的转换。 @user1879185