Hide/show multiple elements with multiple checkboxes

Question

Updated after the hint in comments.

Current jsfiddle

Is there a way so that I only have to write the script once and use it for multiple ID's?
I currently have 3 checkboxes so I just copied the code 3 times but if I get for example a 100 checkboxes I can't imagine copying this a 100 times would be verry effecient

Current code

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

As alluded to in the comments, you are reusing your elem variable. Change your code so the second and third elem are unique, ie this jsfiddle

Answer 2

You can maybe try something like this. Fiddle This is mostly so that you don't have to copy paste the whole time.

So in a nutshell, i am adding the html controls dynamically and then hooking up the onchange event on the checkboxes

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

IMHO, loops should do. Also, use class instead of id on your HTML elements.

Snippet:

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

Hope this helps.