Question

我正在尝试使用我可以点击的三个选项创建一个收音机菜单。以下是我尝试此操作的代码片段：

<html>

<form id="form" name="form">
    <tr><td align=left><input type="radio" name="grade" value="1st">1st</td></tr><br>
   <tr><td align=left><input type="radio" name="grade" value="2nd">2nd</td></tr><br>
   <tr><td align=left><input type="radio" name="grade" value="3rd">3rd</td></tr><br>
</form>

现在当我做其他形式如输入类型=“文本”时，我可以使用id例如：

<tr><td align=left><input type="text" id="grade" value="3rd">

当我尝试在单选按钮中使用id时，我无法单击一个按钮。当我点击一个按钮时，另一个按钮仍然被点击，我无法取消它。此外，我只想让用户只选择一个值。通过我一直在做的事情，我依靠id来定义存储在模板中的变量。如何使用单选按钮解决此问题。有什么我可以做的是使用id来定义变量的等价吗？

Answer 1

没有什么可以阻止您在单选按钮组上使用id属性，只要您为所有这些组保持名称相同以构建组

<table>
    <tr><td align=left><input type="radio" id="grade1" name="grade" value="1st">1st</td></tr><br>
    <tr><td align=left><input type="radio" id="grade2" name="grade" value="2nd">2nd</td></tr><br>
    <tr><td align=left><input type="radio" id="grade3" name="grade" value="3rd">3rd</td></tr><br>
</table>

Answer 2

您仍然可以使用这样的ID。此外，如果您单击单选按钮，另一个将变为unchecked，因为它们位于相同的表单中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <title></title>
  </head>
  <body>
    <form id="form" name="form">
        <tr><td align=left><input id="one" type="radio" name="grade" value="1st" checked>1st</td></tr><br>
       <tr><td align=left><input id="two" type="radio" name="grade" value="2nd">2nd</td></tr><br>
       <tr><td align=left><input id="three" type="radio" name="grade" value="3rd">3rd</td></tr><br>
    </form>
    <script type="text/javascript">
      var onev = $('#one').val();
      console.log(onev); //logs 1st
      var twov = $('#two').val();
      console.log(twov); //logs 2nd
      var threev= $('#three').val();
      console.log(threev); //logs 3rd
    </script>
  </body>
</html>

在电台菜单html中等同于id

2 个答案: