javascript - 表单提交中的多选网格HTML

Question

我做了自己的多项选择网格:

<div style="overflow-x:auto;">
  <table class="w-100">
    <tr>
      <td class="border"></td>
      <td class="border">Yes</td>
      <td class="border">No</td>
    </tr>
    <tr>
      <td class="border">Is red your favorite color?</td>
      <td class="border">
        <div class="custom-control custom-radio"><input type="radio" id="option1" name="row1" value="???" class="custom-control-input">
          <label class="custom-control-label" for="option1"></label></div>
      </td>
      <td class="border">
        <div class="custom-control custom-radio"><input type="radio" id="option2" name="row1" value="???" class="custom-control-input">
          <label class="custom-control-label" for="option2"></label></div>
      </td>
    </tr>
  </table>
</div>

这是一种形式，我遇到了一个问题，在该问题中，我不知道该设置什么值，因此我无法确定按下了哪个选项以及在哪一行。我正在使用Django作为后端。这有意义吗？谢谢!!

Answer 1

您可以这样进行:将单选输入的值设置为yes和no，使用val()和行号通过单选输入的名称获取值。

$(".custom-control-input").on("change", function() {
  let val = $(this).val();
  let row = $(this).attr("name");
  console.log("value for " + row + ": " + val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="overflow-x:auto;">
  <table class="w-100">
    <tr>
      <td class="border"></td>
      <td class="border">Yes</td>
      <td class="border">No</td>
    </tr>
    <tr>
      <td class="border">Is red your favorite color?</td>
      <td class="border">
        <div class="custom-control custom-radio"><input type="radio" id="option1" name="row1" value="yes" class="custom-control-input">
          <label class="custom-control-label" for="option1"></label></div>
      </td>
      <td class="border">
        <div class="custom-control custom-radio"><input type="radio" id="option2" name="row1" value="no" class="custom-control-input">
          <label class="custom-control-label" for="option2"></label></div>
      </td>
    </tr>
  </table>
</div>