基于复选框动态显示和隐藏 Div 的 Javascript 函数

Posted 2023-03-25

【中文标题】基于复选框动态显示和隐藏 Div 的 Javascript 函数

【英文标题】：Javascript Function that shows and hides Div based on Checkboxes Dynamically

【发布时间】：2021-12-03 23:23:10

【问题描述】：

所以我在 html 中构建了一个表单，它使用了很多复选框和隐藏的 Div。我现在正在使用

function HideDiv1() 
  var checkBox = document.getElementById("Check1");
  var div = document.getElementById("Div1");
  
  if (checkBox.checked == true) 
    div.style.display = "block";
   else 
    div.style.display = "none";
  

<input type="checkbox" id="Check1">CheckBox to show Div1
<div id="Div1" style="display: none;">I should be hidden, assuming the author didn't mess up!</div>

根据相应的复选框隐藏每个 div。但这意味着我每次都在复制和重写这个函数，而且我喜欢保留我的函数的部分变得相当大。我想知道是否有一种更简单的方法可以做到这一点，这样我只需要一个函数就可以动态显示和隐藏 Div，而无需每次都复制和重写这个函数。

（如果有一些简单的 JQuery 解决方案：请记住，我不知道如何使用 JQuery）

这可能是重复的，我以前看过一次答案，但我不知道如何再次找到它:(

【问题讨论】：

你应该避免在 2021 年在 JS 中使用 .style 函数。现代方法是使用 .classList + .add('class-name') 、 .remove('class-name') 或 .toggle('class-name') 通过 CSS 应用更改。这导致的问题要少得多，包括。可能的特异性权重问题。

【参考方案1】：

您可以使用data attributes 来确定在更改复选框时要显示哪个div。

您可以通过侦听每个复选框上的change 事件并切换相应的div 和jQuery.toggle 来做到这一点：

$('input[type=checkbox]').change(function()
  $('div[data-id='+$(this).data('target')+']').toggle()
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" data-target="1">CheckBox to show Div1
<div style="display: none;" data-id="1">Div1</div>
<br/>
<input type="checkbox" data-target="2">CheckBox to show Div2
<div style="display: none;" data-id="2">Div2</div>

原版 JS 实现：

document.addEventListener('click', function(e)
  if(e.target.matches('input[type=checkbox]'))
    let target = document.querySelector('div[data-id="'+e.target.dataset.target+'"]');
    target.style.display = target.style.display == "none" ? "block" : "none";
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" data-target="1">CheckBox to show Div1
<div style="display: none;" data-id="1">Div1</div>
<br/>
<input type="checkbox" data-target="2">CheckBox to show Div2
<div style="display: none;" data-id="2">Div2</div>

【参考方案2】：

您可以在复选框中添加一个 onchange 属性来调用一个名为 hideDiv 的函数并向其传递两个参数，即复选框的 id 和您使用该复选框隐藏的 div：

onchange="hideDiv("check1","div1")"

...然后 hideDiv 使用传递给它的参数来切换正确的 div：

function hideDiv(checkId, divId) 
      const checkbox = document.getElementById(checkId)
      const div = document.getElementById(divId);

      if (checkBox.checked == true) 
          div.style.display = "block";
       else 
          div.style.display = "none";
  

养成对需要更改的变量使用 let 的习惯，对不会改变值的变量使用 const 而不是 var .