Question

我正在创建一个函数，允许用户使用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>

Answer 1

在循环中，您再次使用相同的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>

在Laravel和Javascript中选择和取消选择

1 个答案: