时间戳

首页 > 解决方案 > 表单提交中的多项选择网格 HTML

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

问题描述

我制作了自己的多项选择网格：

<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 作为我的后端。这有意义吗。谢谢！！

标签： javascripthtmljquery

解决方案

您可以这样做：将无线电输入的值设置为是和否，使用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>

推荐阅读