我正在创建一个函数,允许用户使用Javascript选择和取消选择多个产品,问题是它只显示一个复选框,而不是每个产品都有其复选框。如果我有20个产品,则显示1个复选框。第一个产品,我该如何解决?
刀片文件
<span><a class="Select-Deselect" href="">Select</a></span>
@foreach($products as $product)
<div id="checkBox1" style=" display:none; position:absolute;">
<h1>hello</h1>
</div>
@endforeach
JavaScript
<script>
/* Select deselect */
$(".Select-Deselect").click(function(e) {
if ($(this).html() == "Select") {
document.getElementById("checkBox1").style.display="block";
$(this).html('Deselect');
}
else {
$(this).html('Select');
document.getElementById("checkBox1").style.display="none";
}
return false;
});
</script>
答案 0 :(得分:0)
在循环中,您再次使用相同的id
属性创建多个div。如所述,id
属性必须在文档中是唯一的。请删除class
属性,而使用id
。
更改您的<a>
以选择/取消选择按钮,这更合适:
由于您已经在脚本中使用jQuery,所以我也使用它来切换元素上的display
样式。
我删除了id="checkBox1"
并将其替换为class="checkbox-container"
。使用类可以选择多个元素,$(".checkbox-container")
就是这样。
这是一个可行的示例:
刀片:
<button class="Select-Deselect" type="button">Select</button>
@foreach($products as $product)
<div class="checkbox-container" style="display:none;">
<h1>hello</h1>
</div>
@endforeach
jQuery:
<script>
$(".Select-Deselect").click( function(e) {
if ($(this).html() == "Select") {
$(".checkbox-container").css('display', 'block');
$(this).html('Deselect');
} else {
$(".checkbox-container").css('display', 'none');
$(this).html('Select');
}
return false;
});
</script>