javascript - 隐藏/显示带有多个复选框的多个元素

Question

根据评论中的提示进行更新。

当前jsfiddle

有没有办法让我只需要编写一次脚本并将其用于多个 ID？
我目前有 3 个复选框，所以我只复制代码 3 次，但如果我得到 100 个复选框，我无法想象复制 100 次会非常有效

当前代码

Javascript

var elem1 = document.getElementById('div_product_1'),
checkBox1 = document.getElementById('product_1');
checkBox1.checked = false;
checkBox1.onchange = function () {
    elem1.style.display = this.checked ? 'block' : 'none';
};
checkBox1.onchange();

var elem2 = document.getElementById('div_product_2'),
checkBox2 = document.getElementById('product_2');
checkBox2.checked = false;
checkBox2.onchange = function () {
    elem2.style.display = this.checked ? 'block' : 'none';
};
checkBox2.onchange();

var elem3 = document.getElementById('div_product_3'),
checkBox3 = document.getElementById('product_3');
checkBox3.checked = false;
checkBox3.onchange = function () {
    elem3.style.display = this.checked ? 'block' : 'none';
};
checkBox3.onchange();

HTML

<input type="checkbox" name="product_1" id="product_1" />
<label>Product 1</label><br>
<div id="div_product_1">
    <input type="number" name="quantity_1" id="quantity_1" />

</div>

<input type="checkbox" name="product_2" id="product_2" />
<label>Product 2</label><br>
<div id="div_product_2">
    <input type="number" name="quantity_2" id="quantity_2" />

</div>

<input type="checkbox" name="product_3" id="product_3" />
<label>Product 3</label><br>
<div id="div_product_3">
    <input type="number" name="quantity_3" id="quantity_3" />

</div>

Answer 1

正如评论中提到的，您正在重用您的 elem 变量。更改您的代码，使第二个和第三个 elem 是唯一的，即 this jsfiddle