基于选中的复选框的jquery简单隐藏显示

Question

我想根据是否选中复选框来显示和隐藏主文件中的选项。 我有很多复选框，但在这里我正在检查地址复选框。

这是我的复选框

<input type="checkbox" id="address">Mark it

这是我想隐藏/显示的 div

<div id="options">
//div
</div>

 if($('#address').prop('checked')){
        $('#options').show()
      }else{
        $('#options').hide()
      }

上面的代码对我不起作用。

Answer 1

您的代码仅在第first time而不是在复选框的值每次更改时生效。

您必须在更改复选框的checked值时添加event listener

$("#address").on("change", e => {
  const isChecked = e.target.checked;
  if (isChecked) $('#options').show()
  else $('#options').hide()
})

 if ($('#address').prop('checked')) { $('#options').show() } else { $('#options').hide() } $("#address").on("change", e => { const isChecked = e.target.checked; if (isChecked) $('#options').show() else $('#options').hide() })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="address">Mark it <div id="options"> //div </div>

Answer 2

您的代码不起作用的原因，您只检查条件复选框检查或不每次单击复选框时也必须调用复选框更改事件。 这是一个工作演示，希望它可以帮助您了解 jquery 的工作原理。

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { $('#options').hide(); $('#address').change(function () { if ($('#address').prop('checked')) { $('#options').show() } else { $('#options').hide() } }); }); </script> </head> <body> <div id="options"> //div </div> <input type="checkbox" id="address">Mark it </body> </html>

基于选中的复选框的jquery简单隐藏显示

问题描述

2 个解决方案

解决方案1
3 2021-11-08 05:28:20

解决方案2
2 2021-11-08 05:29:11

基于选中的复选框的jquery简单隐藏显示

问题描述

2 个解决方案

解决方案1 3 2021-11-08 05:28:20

解决方案2 2 2021-11-08 05:29:11

解决方案1
3 2021-11-08 05:28:20

解决方案2
2 2021-11-08 05:29:11