Question

我正在尝试使用此代码过滤我的项目中的一些数据（隐藏一些数据并保留一些数据）。我刚发布了一个简单的隐藏框来接受这个想法。我包含了jQuery和我需要的所有文件。没有控制台错误。

if (rad1.checked == true) {
  $(document).ready(function() {
    $(".display").css({
      "display": 'none'
    })
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="rad1">ALL student</label>&nbsp;<input type="checkbox" name='rad1' id='rad1'>
<div class="display" style="background-color:green;width:100px;height:100px"></div>

Answer 1

您需要一个事件监听器。否则它只会在您加载页面时检查一次。将所有jQuery包装在$(document).ready()函数中以确保所有文档对象都可用也是一种很好的做法。

我从隐藏的div.display开始，然后每次单击复选框时使用$.toggle()方法显示和隐藏。

$(document).ready(function() {
    $("#rad1").click(function(event){
        $(".display").toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="rad1">ALL student</label>&nbsp;<input type="checkbox" name='rad1' id='rad1'>
<div class="display" style="display:none;background-color:green;width:100px;height:100px"></div>

Answer 2

首先应检查文档是否已准备就绪，然后检查rad1是否已经过检查

 $(document).ready(function() {
    if (rad1.checked === true) {
        $(".display").css({
         "display": 'none'
       });
    }
 }
});

如果我的问题正确

Answer 3

rad1.checked只会在脚本运行时检查正确，您需要将事件绑定到rad1并根据此事件进行切换。以下是如何执行此操作的示例。

这样，您也无需检查文档是否已准备就绪。

$("#rad1").click(function() {

    $("#rad1").toggle(this.checked);
    if (this.checked) {
      $(".display").css({
        "display": 'none'
      });
    }
    else {
      $(".display").css({
        "display": 'block'
      });
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="rad1">ALL student</label>&nbsp;<input type="checkbox" name='rad1' id='rad1'>
<div class="display" style="background-color:green;width:100px;height:100px"></div>

使用JavaScript和jQuery隐藏框

3 个答案: