我做的不同：

Question

我正在尝试隐藏/显示基于复选框更改事件的元素。事件确实被触发，但隐藏/显示不起作用。

这是我的代码：

$("#inlineCheckbox3").change(function() {   
    $checked = $(this).is(":checked");
    console.log($checked); //logs true or false properly
    if (!$checked) {
        $("#myDiv").hide(); //this doesnt work at all.
        alert('test'); //alert is working
    }
});

如果我提出类似的内容：

if ($("#inlineCheckbox3").is(":checked")) {
    $("#myDiv").hide();
}

它可以在我的控制台上运行。

解决方案：

我的JavaScript中有第二个.click()处理程序，导致隐藏的div立即重新出现。这种方式似乎没有隐藏起来。

Answer 1

尝试此操作（Run CODE Snippet＆amp;选中/取消选中复选框）：

(function($){
  $("#inlineCheckbox3").change(function() {   
    $checked = $(this).is(":checked");
    if (!$checked) {
        $("#myDiv").hide();
    }
    else {
      $("#myDiv").show();
    }
  });
})(jQuery);

#myDiv {
  width: 200px;
  height: 50px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inlineCheckbox3" type="checkbox" checked="checked">
<div id="myDiv"></div>

我做的不同：

在您的代码中，您只添加了hide()功能，当复选框被选中时，它没有再次show()。
根据范围，您无法始终访问$。这就是我用(function($){})(jQuery);

很可能你在这两个中的一个中出现错误。

jQuery复选框更改没有正确触发

1 个答案:

我做的不同：