Question

对于我正在进行的调查，我有一堆可选的“写入”值。

这些基本上是一个单选按钮，在答案字段中有一个文本框 - 这个想法是你要切换按钮并在框中写一些东西。

我想做的是每当用户点击文本字段时都会切换单选按钮 - 这看起来像是一个很有意义的用例。

这样做：

<input type="radio" id="radiobutton"><label for="radiobutton">Other: <input type="text" id="radiobutton_other"></label>

在Chrome中运行良好（我猜测，其他WebKit浏览器也是如此），但Firefox中存在奇怪的选择问题，所以我假设它是一种非标准的做法，我应该远离它。

有没有办法在不使用JavaScript的情况下复制此功能？我有一个可以使用的onclick功能，但是我们正在努力使我们的网站可以用于可能运行NoScript类型的人。

Answer 1

在标签内部输入实际上具有略微不同的含义。它不会使输入本身成为标签，它隐含地将标签与输入相关联，就像它们由for / id链接一样。

但是，只有在标签没有for属性来覆盖它时才会发生这种情况（请参阅HTML4 s17.9：“当存在时，此属性的值必须与值相同同一文档中某些其他控件的id属性。当不存在时，定义的标签与元素的内容相关联。“）。根据规范不清楚当收容和for都存在时会发生什么。

（并且它在IE中也不起作用，这使得实际意义上没有用。）

不，你需要一些脚本。

<input type="radio" id="radiobutton">
<label for="radiobutton_other">Other:</label>
<input type="text" id="radiobutton_other">

<script type="text/javascript">
    var other= document.getElementById('radiobutton_other');
    other.onchange=other.onkeyup= function() {
        if (this.value!=='')
            document.getElementById('radiobutton').checked= true;
    };
</script>

Answer 2

它（标签内的输入）validates就像HTML 4.01一样好。我可以在您的代码中看到的一个潜在问题是，两个无线电元素在您的示例中具有相同的ID。元素ID 必须在HTML和XHTML文档中是唯一的，您应该使用name属性来识别广播组。

如果您在更改后仍然遇到问题，则必须将输入移到<label>元素之外并使用脚本。

是否可以在<label>字段中使用输入？</label>

2 个答案: