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

Question

所以我在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)

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

Answer 1

您可以使用数据属性来确定当复选框更改时要显示哪个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>

Answer 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.