Javascript 使用多个复选框隐藏/显示多个元素

在注释中的提示后更新

当前

有没有一种方法可以让我只需编写一次脚本并将其用于多个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>

---

正如注释中提到的，您正在重用elem变量。更改代码，使第二个和第三个元素是唯一的，也就是说，

您可以尝试类似的方法。 这主要是为了使您不必一直复制粘贴

简而言之，我动态添加html控件，然后在复选框上连接onchange事件

HTML

JS

---

嗯，循环应该可以。另外，在HTML元素上使用类而不是id

片段：

var numProducts=10； var classNameProduct='product'； var classNameContainerProduct='div_product'； var classNameQuantity='quantity'； var mainContainer=document.body； 函数生成器标记{

---

forvar i=0；iHint:您有三个div，但只有一个elem变量…@nnnn OMG谢谢，不敢相信我错过了…，现在我有第二个问题。有没有办法只为每个复选框编写一次此脚本？我目前有3个，我可以轻松复制粘贴每个div的脚本，但是想象一下如果我需要100，我如何解决这个问题在？您可以编写一个循环。但是我更愿意给复选框一个公共类，并为父元素分配一个单击处理程序，因为每次单击都会跳转到父元素，然后您可以编写父单击处理程序来检查单击的元素是否有该类，如果有，找到关联的div并切换其可见性y、 一个粗略但有效的示例：-请注意，我已将每个复选框/div对包装在另一个div中，以便于在JS中将它们关联在一起。此外，我还使用CSS而不是JS在页面首次加载时将产品div隐藏起来。抱歉，我现在没有时间完整解释它的工作原理。@Steven发生了什么事，你说的是y单击此文档网页，调用此函数。var cb=e.target正在抓取被单击/导致事件的元素。如果该元素具有分配给它的productcheck类，则只有您的复选框应该继续，否则离开。如果if语句为true，则获取复选框的父项，然后抓取包含wi的div精简包含输入字段的div。然后，根据触发此事件的复选框是否被选中来设置此div的显示样式。谢谢，不知道我是怎么漏掉它的。我只需要使元素唯一还是使复选框唯一。在注释中给出提示后，我创建了元素和复选框唯一，但我看到在您的JSFIDLE中，您只使复选框唯一？Steven，您不需要复选框的唯一变量，因为在显示的代码中，您不需要再次引用相同的复选框。而elem变量在每次调用这些单击处理程序时都会使用。但是唯一的复选框变量可能看起来更整洁。。。

<div id="placeholder"></div>

var max_fields = 100; //maximum input boxes allowed

var $placeholder = $("#placeholder");

// Add html controls
for (var i = 0; i < max_fields; i++) {
    $placeholder.append("<input type='checkbox' name='product_" + i + "' id='product_" + i + "'/>")
        .append("<label>Product " + i + "</label")
        .append("<div id='div_product_" + i + "'></div>");

    var $divProduct = $("#div_product_" + i);
    $divProduct.append("<input type='number' name='quantity_" + i + "' id='quantity_" + i + "' class='hide'  />");
}

// wire the onclick events
$('[id*="product_"]').change(function () {
    console.log($(this));
    var splitId = $(this).attr("id").split("_")[1]
    console.log({
        id: splitId,
        control: $("#quantity_" + splitId)
    })
    $("#quantity_" + splitId).toggle()
});