Question

这可能是一个愚蠢的问题，但我需要获取特定行的已选中复选框的值。

<form method="POST" action="flight_cart.php">
    <table>
        <tr id=1>
            <td><input id="foodType" type="checkbox" value="Burger">Burger</input></td>
            <td><input id="extras" type="checkbox" value="jalapeno">Jalapeno</input></td>
            <td><input id="extras" type="checkbox" value="mustard">Mustard</input></td>
            <td><input id="extras" type="checkbox" value="Chili">Chili Sauce</input></td>
        </tr>
        <tr id=2>
            <td><input id="foodType" type="checkbox" value="Sandwich">Sandwich</input></td>
            <td><input id="extras" type="checkbox" value="jalapeno">Jalapeno</input></td>
            <td><input id="extras" type="checkbox" value="mustard">Mustard</input></td>
            <td><input id="extras" type="checkbox" value="Chili">Chili Sauce</input></td>
        </tr>
        <tr id=3>
            <td><input id="foodType" type="checkbox" value="Sub">Sub</input></td>
            <td><input id="extras" type="checkbox" value="jalapeno">Jalapeno</input></td>
            <td><input id="extras" type="checkbox" value="mustard">Mustard</input></td>
            <td><input id="extras" type="checkbox" value="Chili">Chili Sauce</input></td>
        </tr>
        <tr><td><button type="submit">Add to Order</td></tr>
    </table>
</form>

所以基本上，我希望用户能够选择例如：带墨西哥胡椒的汉堡，带墨西哥胡椒的三明治，芥末和辣椒，以及只有辣椒的子。并将它们存储到一个数组中，以便将其传递到购物车页面。提前谢谢！

Answer 1

试试这个，它可能就是您正在寻找的，或者它应该让您对如何解决问题有个好主意

注意：使用相同Id的多个元素不是一个好习惯。使用class表示

此示例还会在将数据推送到数组之前检查您是否选择了foodtype。

$("table button").click(function(e) {
  e.preventDefault()
  var food = [];
  $("table tr").each(function() {
    if ($(this).find(".foodType").prop("checked") == true) {
      var values = $(this).find('input:checkbox:checked').map(function() {
        return this.value;
      }).get();
      food.push(values)
    }
  })
  console.log(food)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="">
  <table>
    <tr id=1>
      <td><input class="foodType" type="checkbox" value="Burger">Burger</input>
      </td>
      <td><input class="extras" type="checkbox" value="jalapeno">Jalapeno</input>
      </td>
      <td><input class="extras" type="checkbox" value="mustard">Mustard</input>
      </td>
      <td><input class="extras" type="checkbox" value="Chili">Chili Sauce</input>
      </td>
    </tr>
    <tr id=2>
      <td><input class="foodType" type="checkbox" value="Sandwich">Sandwich</input>
      </td>
      <td><input class="extras" type="checkbox" value="jalapeno">Jalapeno</input>
      </td>
      <td><input class="extras" type="checkbox" value="mustard">Mustard</input>
      </td>
      <td><input class="extras" type="checkbox" value="Chili">Chili Sauce</input>
      </td>
    </tr>
    <tr id=3>
      <td><input class="foodType" type="checkbox" value="Sub">Sub</input>
      </td>
      <td><input class="extras" type="checkbox" value="jalapeno">Jalapeno</input>
      </td>
      <td><input class="extras" type="checkbox" value="mustard">Mustard</input>
      </td>
      <td><input class="extras" type="checkbox" value="Chili">Chili Sauce</input>
      </td>
    </tr>
    <tr>
      <td><button type="submit">Add to Order</td></tr>
    </table>
</form>

Answer 2

使用代码

$("tr[id='1']").find("input[type='checkbox']:checked")

Answer 3

只需在表单中添加一些ID，

var choices=[];
$("#formId input:checkbox:checked").each(function() {
   choices.push($(this)[0].value);
});

您将获得表格中所有选中复选框的数组。

如何获取表JavaScript中行的复选框的值

3 个答案: