基於選中的復選框的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