Question

我有一个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>

此示例着眼于按钮，但我希望它引用复选框的状态

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

尝试使用此代码，希望这是您的要求

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

隐藏基于分号框的Show Div

2 个答案: