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

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>