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，然后在onchange

上挂钩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

恕我直言，循环应该做。另外，在HTML元素上使用class代替id。

<强> 段：

＆＃13;

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

＆＃13;

希望这有帮助。

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

3 个答案: