HTML 表单：带有文本字段的单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12888612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Forms: Radio buttons with text fields
提问by alyx
This seems like a simple problem, but how do I create a basic HTML form that has a series of radio button options, with the last one being a text field to fill in a custom response (i.e. "Other").
这似乎是一个简单的问题，但如何创建一个具有一系列单选按钮选项的基本 HTML 表单，最后一个是用于填写自定义响应（即“其他”）的文本字段。
What I have now:
我现在所拥有的：
Reason given for stop? <br>
<input type="radio" name="reason" value="Fit Description">Fit Description<br>
<input type="radio" name="reason" value="Suspicious Behavior">Suspicious Behavior<br>
<input type="radio" name="reason" value="No Reason Given">No Reason Given<br>
<input type="radio" name="reason" value="">Other<br>
回答by j08691
Just add a text input field to it.
只需向其添加文本输入字段即可。
Reason given for stop? <br>
<input type="radio" name="reason" value="Fit Description">Fit Description<br>
<input type="radio" name="reason" value="Suspicious Behavior">Suspicious Behavior<br>
<input type="radio" name="reason" value="No Reason Given">No Reason Given<br>
<input type="radio" name="reason" value="">Other <input type="text" name="other_reason" />????????????????????????????????
回答by Anthony
- Create a text field, and set it to display:none;
- Then with jQuery, detect when the 'Other' radio button is checked and show the textbox.
- Then on your process script, do and if statement to see if the value of your radio button group is "" (nothing), and grab the post data of the textbox and do what you want with it.
- 创建一个文本字段，并将其设置为 display:none;
- 然后使用 jQuery，检测何时选中“其他”单选按钮并显示文本框。
- 然后在您的流程脚本中，执行和 if 语句以查看您的单选按钮组的值是否为“”（无），并获取文本框的发布数据并执行您想要的操作。
回答by R Bowen
Simply add a text field as you would normally but give it the same name attribute as the others, that way when accessing them you'll get one of them.
只需像往常一样添加一个文本字段，但为其提供与其他字段相同的名称属性，这样在访问它们时您将获得其中之一。
In JavaScript (which I assume you'll be using?) just access these elements and check the the textfield is empty, if it is get the radio buttons.
在 JavaScript 中（我假设你会使用它？）只需访问这些元素并检查文本字段是否为空，如果它是获取单选按钮。
回答by Georgi Shopov
There is a neat way to add text field alongside radio buttons without using functions or Javascript (jQuery). Just add the radio btn (Other) and the text field next to it, on the top of your HTML form. Here is what i use:
有一种巧妙的方法可以在不使用函数或 Javascript (jQuery) 的情况下在单选按钮旁边添加文本字段。只需在 HTML 表单的顶部添加单选 btn（其他）和它旁边的文本字段。这是我使用的：
Color:
颜色：
<input type="radio" name="title[<?=$red?>][color]" value="" <?php if ($row['color'] != ' ') {echo 'checked';} ?> />Other <input type="text" name="title[<?=$red?>][color]" value="<?php echo $row['color'] ?>" style="width: 200px;" /> |
<input type="radio" name="title[<?=$red?>][color]" value="natural" <?php if ($row['color'] == 'natural') {echo 'checked';} ?> />natural|
<input type="radio" name="title[<?=$red?>][color]" value="stain" <?php if ($row['color'] == 'stain') {echo 'checked';} ?> />stain |
<input type="radio" name="title[<?=$red?>][color]" value="white" <?php if ($row['color'] == 'white') {echo 'checked';} ?> />white|
Basically you do not put value on the "Other" radio input, but on the text input so whatever you write in the text field will be send to db - its 1st field in the FORM. If nothing in the text field - the other checked radio input will be processed.
基本上，您不会将值放在“其他”单选框输入上，而是放在文本输入上，因此您在文本字段中写入的任何内容都将发送到 db——它在表单中的第一个字段。如果文本字段中没有任何内容 - 将处理其他选中的无线电输入。
Hope this helps.
希望这可以帮助。
