Question

我当前正在构建一个表单，并使用PHP循环在表中构建元素，这些元素包含单击复选框后要提交的值。

<form id="saveLineup">
@foreach($lists as $list)

  <tr style="text-align:center;">
      <td id="groupNumber">{{$list['product']}} - {{$list['product_NAME']}}</td>
      <td id="detailColor">{{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}</td>
      <td id="category">{{$list['CATEGORY']}}</td>
      <td><input id="addToLineup"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?>></td>
  </tr>  

@endforeach
</form>

我的问题是，我在复选框上有一个ID，在值上有ID，因此，当我单击第一个复选框时，我只能获取控制台日志，并且它仅记录第一个项目。如何更改此设置，以便可以使用表中的任何复选框及其相关值提交？

$("#addToLineup").click(function (e) {

  var productNumber = document.getElementById("productNumber").innerHTML = productNumber;
  var detailColor = document.getElementById("detailColor").innerHTML = detailColor;
  var category = document.getElementById("category").innerHTML = category;

  updatedata.productNumber = productNumber;
  updatedata.detailColor = detailColor;
  updatedata.category = category;

  $.ajax({
    url: "/test/addToLineup",
    data: updatedata,
    _token: phpVariables.csrfToken,
    type: "POST",
    beforeSend: function () {
      showLoading(element);
    },
    success: function (data) {
      location.reload();
    },
  });
});

Answer 1

这是解决问题的方法，您需要使用类而不是ID。

@foreach($lists as $list)

  <tr style="text-align:center;">
      <td class="groupNumber">{{$list['product']}} - {{$list['product_NAME']}}</td>
      <td class="detailColor">{{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}</td>
      <td class="category">{{$list['CATEGORY']}}</td>
      <td><input class="addToLineup"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?>></td>
  </tr>  

@endforeach

现在，您可以在JS部分中按其类获取它们：

  var productNumber = document.getElementsByClassName("productNumber").innerHTML = productNumber;
  var detailColor = document.getElementsByClassName("detailColor").innerHTML = detailColor;
  var category = document.getElementsByClassName("category").innerHTML = category;

注意：如果您要通过元素的ID将CSS样式应用于这些元素，则可以在CSS中将#productNumber更改为.productNumber，也可以保留与以前相同的ID标签代码。

Answer 2

In PHP code

    <form id="saveLineup">
        <?php $i=0; ?>
        @foreach($lists as $list)
            <?php $i+=1; ?>
                <tr style="text-align:center;">
                    <td id="groupNumber<?php echo $i ?>">. 
                        {{$list['product']}} - {{$list['product_NAME']}}
                    </td>
                    <td id="detailColor<?php echo $i ?>">. 
                        {{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}.
                    </td>
                    <td id="category<?php echo $i ?>">. 
                        {{$list['CATEGORY']}}
                    </td>
                    <td>
                        <input id="addToLineup<?php echo $i ?>"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo 
    "checked='checked'"; ?>>
                    </td>
              </tr>
        @endforeach
        <input id="listcount"> type="hidden" value="<?php  echo $i; ?>" >
    </form>

Js function

$("#addToLineup").click(function (e) {
    for(var i=1 ; i <= parseInt(document.getElementById("listcount").value); i++) {
        Console.log(document.getElementById("productNumber"+i).innerHTML);
        Console.log(document.getElementById("detailColor"+i).innerHTML);
        Console.log(document.getElementById("category"+i).innerHTML);
    }
});

PHP表单循环构建，JavaScript仅影响第一个元素

2 个答案: