为什么我点击另一个单选按钮时,之前选中的单选按钮不会取消选择?

4
单选按钮在我选择另一个选项时未被取消选择。
<div style="margin: 40px 40px 5px 40px;">
      <form> 
        <div style="">
          <div style="float: left;"><input type="radio"></div>
          <div style="">
        <label style="font-size: 24px">Email my gift</label>
          <div style="font-size: 16px; line-height: 137%;">
  <p>Send my friend a gift email message, including all the info they'll need to get up and running on Viddir.</p>
  <p><label for="email_input">Recipient's email address</label></p>
          <p><input type="text" size="24"></p>
      </div>
      </div>
      </div>
        <br />
        <br />
        <br />
        <input type="radio">
    <label style="font-size: 24px;">Send gift through Viddir</label>
        <div style="font-size: 16px; line-height: 137%;">
      <p>Send my friend a gift message directly to their Viddir account.</p>
      <p style="font-style: italic;">Note: This option also sends an email message, to be sure your friend sees your gift as soon as possible.</p>
      </div>
        <br />
        <br />
        <br />
        <br />
        <input type="radio">
        <label style="font-size: 24px;">Save for later</label>
        <p style="font-size: 16px;">Save your gift for later. You can access it through the gifts tab.</p>
    </div>
        <br />
        <br />
        <br />
        <br />
        <div style="width: 116px; margin: 0 auto;">
      <input type="submit" value="Continue" class="btn btn-success btn-large">
    </form>
    </div>

你浪费时间使用<br/>来定位。使用CSS来设置字体和大小,将<label><input>元素放在<p>段落中,给它们一些间距,并使用<fieldset>来处理相关的输入。这比你现在做的更快。所有的<input>都需要name属性;这是数据发送回服务器的方式。 - Eric Jablow
虽然这里发布的额外代码可能会分散注意力,但我认为这是一个非常合理的问题——我刚刚也有同样的疑问,下面的答案完美地解答了它。 - Garrett Simpson
1个回答

21

具有相同 name 的无线电按钮被视为一组。当您选择一个按钮时,同一组中的所有其他按钮都将取消选择。


哦,很酷,但是它在处理PHP表单方面的效果如何? - user2476551
这可以用值来完成吗? - user2476551
@user2476551 我不确定你的两个问题具体指什么。浏览器将会提交所选单选框的值以及单选框组的名称。 - Michael Lawrie

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接