Hide/show 具有多个复选框的多个元素

Question

根据评论提示更新。

有没有办法让我只需编写一次脚本并用于多个 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

Answer 2

你也许可以尝试这样的事情。 Fiddle 这主要是为了让您不必一直复制粘贴。

简而言之，我正在动态添加 html controls，然后在 checkboxes

上连接 onchange 事件

HTML

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

JS

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()
});

Answer 3

恕我直言，循环应该可以。另外，在 HTML 元素上使用 class 而不是 id。

片段：

var numProducts=10;
var classNameProduct='product';
var classNameContainerProduct='div_product';
var classNameQuantity='quantity';
var mainContainer=document.body;
function generateMarkup(){
 for(var i=0; i<numProducts; i+=1){
  mainContainer.insertAdjacentHTML('beforeend','<input type="checkbox" name="'+classNameProduct+'" class="'+classNameProduct+'"/><label>Product '+i+'</label><br>');
  mainContainer.insertAdjacentHTML('beforeend','<div class="'+classNameContainerProduct+'"><input type="number" name="'+classNameQuantity+'" class="'+classNameQuantity+'"/></div>');
 }
}
function initCheckboxes(){
 var checkboxes=document.querySelectorAll('.'+classNameProduct),containerProducts=document.querySelectorAll('.'+classNameContainerProduct);
 for(var i=0; i<numProducts; i+=1){
  checkboxes[i].checked=false;
  containerProducts[i].style.display='none';
  (function(index){
   checkboxes[index].onchange=function(){ containerProducts[index].style.display=this.checked?'block':'none'; }
  }(i));
 }
}
generateMarkup();
initCheckboxes();

希望对您有所帮助。

Hide/show 具有多个复选框的多个元素

Hide/show multiple elements with multiple checkboxes

javascript

textbox