Html 链接单选按钮和文本输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9215168/
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
Linking radio buttons and text inputs
提问by chris_s
I am trying to associate a radio input with a specified text input. As you can see in the picture, there are two options. I know I can use for=""to associate the label to the radio input, but how can I also associate it to the text input underneath, and vise versa so when I focus on the text input, if focuses the correct radio button?
我正在尝试将无线电输入与指定的文本输入相关联。正如您在图片中看到的，有两个选项。我知道我可以for=""用来将标签与单选输入相关联，但是我如何才能将它与下面的文本输入相关联，反之亦然，所以当我专注于文本输入时，如果聚焦正确的单选按钮？
NOTE: The amount entered will be inserted into the database, so that's the most important part of this form. Currently if I click on $Off, I can still enter a number in %Off. I don't want this to happen, so the user does not get confused.
注意：输入的金额将被插入到数据库中，因此这是此表格中最重要的部分。目前，如果我点击 $Off，我仍然可以在 %Off 中输入一个数字。我不希望这种情况发生，因此用户不会感到困惑。
My markup:
我的标记：
<div class="row-fluid control-group">
<div class="span7 pull-left">
<label class="radio" for="discount-dollars">
<input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
$ Off
</label>
<div class="input-append">
<input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
<span class="add-on">.00</span>
</div>
</div><!-- .span7 .pull-left -->
<div class="span5">
<label class="radio" for="discount-percent">
<input type="radio" name="discount" id="discount-percent" value="percent">
% Off
</label>
<input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
</div>
</div><!-- .row-fluid .control-group -->
<script type="text/javascript">
$(function (){
$("form input[type=radio]").click(function (){
// get the value of this radio button ("dollars" or "percent")
var value = $(this).val();
// find all text fields...
$(this).closest("form").find("input[type=text]")
// ...and disable them...
.attr("disabled", "disabled")
// ...then find the text field whose class name matches
// the value of this radio button ("dollars" or "percent")...
.end().find("." + value)
// ...and enable that text field
.removeAttr("disabled")
.end();
});
});
</script>
采纳答案by Brandan
You can't use a single <label>element to label two separate inputs. I would suggest associating the labels to the radio buttons, since the radio button is such a small click target and the label expands that target.
您不能使用单个<label>元素来标记两个单独的输入。我建议将标签与单选按钮相关联，因为单选按钮是一个很小的点击目标，而标签会扩展该目标。
Choose one of the radios to be selected by default, perhaps "$ Off". Disable the other text field by default:
选择默认情况下要选择的收音机之一，可能是“$ Off”。默认禁用其他文本字段：
<div class="row-fluid control-group">
<div class="span7 pull-left">
<label class="radio" for="discount-dollars">
<input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
$ Off
</label>
<div class="input-append">
<input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
<span class="add-on">.00</span>
</div>
</div><!-- .span7 .pull-left -->
<div class="span5">
<label class="radio" for="discount-percent">
<input type="radio" name="discount" id="discount-percent" value="percent">
% Off
</label>
<input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
</div>
</div><!-- .row-fluid .control-group -->
Then use jQuery to do something like this:
然后使用 jQuery 做这样的事情：
$(function (){
$("#discount-dollars, #discount-percent").click(function (){
// get the value of this radio button ("dollars" or "percent")
var value = $(this).val();
// find all text fields...
$(this).closest(".control-group").find("input[type=text]")
// ...and disable them...
.attr("disabled", "disabled")
// ...then find the text field whose class name matches
// the value of this radio button ("dollars" or "percent")...
.end().find("." + value)
// ...and enable that text field
.removeAttr("disabled")
.end();
});
});
Basically, this listens for clickevents on both radio buttons. When you click one radio, it enables its associated text field (i.e., the text field with a CSS class name matching the value of the radio button) and disables the other text field. That way, you can't enter text into either text field unless its associated radio button is checked.
基本上，这会侦听click两个单选按钮上的事件。当您单击一个单选按钮时，它会启用其关联的文本字段（即，CSS 类名称与单选按钮值匹配的文本字段）并禁用另一个文本字段。这样，除非选中相关的单选按钮，否则您无法在任一文本字段中输入文本。
回答by Zenexer
jQuery is what you want. Assuming your elements had IDs as follows:
jQuery 就是你想要的。假设您的元素具有如下 ID：
- $ radio button: money-radio
- $ text box: money-text
- % radio button: percent-radio
- % text box: percent-text
- $ 单选按钮：money-radio
- $ 文本框：money-text
- % 单选按钮：百分比单选
- % 文本框：百分比文本
...the code might look something like this. This will take care of disabling text boxes and focusing input properly.
...代码可能看起来像这样。这将负责禁用文本框并正确聚焦输入。
<form>
<table>
<tr>
<td>
<input type="radio" id="money-radio" name="unit" value="money" />
<label for="money-radio">$ Off</label>
</td>
<td>
<input type="radio" id="percent-radio" name="unit" value="percent" />
<label for="percent-radio">% Off</label>
</td>
</tr>
<tr>
<td>
<input type="text" id="money-text" name="money-off" />
</td>
<td>
<input type="text" id="percent-text" name="percent-off" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
$(function() {
$('#percent-radio, #money-radio').change(function() {
if ($('#percent-radio').val() == true) {
$('#percent-text').removeAttr('disabled').focus();
} else {
$('#percent-text').attr('disabled', 'disabled');
}
if ($('#money-radio').val() == true) {
$('#money-text').removeAttr('disabled').focus();
} else {
$('#money-text').attr('disabled', 'disabled');
}
}).change();
});
</script>
回答by Boris
You cannot focus on two elements, it will be either the input text field or the radio button. But you should use JavaScript or jQuery, when you click on the radio button to focus on the field below, or when you enter value in the field below to check the radio button above.
您不能关注两个元素，它要么是输入文本字段，要么是单选按钮。但是您应该使用 JavaScript 或 jQuery，当您单击单选按钮以关注下面的字段时，或者当您在下面的字段中输入值以检查上面的单选按钮时。
This can help you if you want to use jquery : http://api.jquery.com/val/and http://api.jquery.com/focus/
如果您想使用 jquery，这可以帮助您：http: //api.jquery.com/val/和http://api.jquery.com/focus/
回答by martti d
use image radio button with 2 states, selected and not selected, when you click the radio image just set focus to the textbox and swap to your selected radio image, and vice versa.
使用具有 2 个状态的图像单选按钮，选中和未选中，当您单击单选图像时，只需将焦点设置到文本框并切换到您选择的单选图像，反之亦然。
回答by Ascalonian
This is a VERY rough sketch to help you out, but you could do something like this (giving you follow a certain naming convention):
这是一个非常粗略的草图来帮助你，但你可以做这样的事情（让你遵循一定的命名约定）：
<input type="radio" name="rGroup" id="radioDollarOff" onclick="changeMe(this);"/> <input type="text" name="textDollarOff" id="textDollarOff" onclick="changeMe(this);"/>
<br />
<input type="radio" name="rGroup" id="radioPctOff" onclick="changeMe(this);"/> <input type="text" name="textPctOff" id="textPctOff" onclick="changeMe(this);"/>
<script>
function changeMe(inField) {
var fieldId = inField.id;
var type = fieldId.substring(0, 4);
if(type == 'text') {
var name = fieldId.substring(4);
var radioButton = document.getElementById("radio" + name);
radioButton.checked = true;
}else {
var name = fieldId.substring(5);
var textField = document.getElementById("text" + name);
textField.focus();
}
}
</script>
