Question

我想在单击单选按钮时显示几个文本字段，我该怎么办？没有JavaScript或AJAX。

Answer 1

您必须为此使用JavaScript。

Answer 2

除了可能工作的JavaScript之外唯一的另一件事（我还没有尝试过但需要调查）是在CSS中使用:focus pseudo class。即使它有效，它也不会是跨浏览器，但由于你是针对特定的移动平台，它可能没问题。它会像这样工作：

<style>
    #bar { display:none; }
    #foo:selected #bar { display:block; }        
</style>

<input type="radio" id="foo">
<label for="foo"><div id="bar">Stuff goes here</div></label>

我不知道：focus是否也适用于表单元素的关联标签，但它肯定可能会考虑单击元素的标签会激活它标记的表单元素上的“click”事件。

无论如何都要尝试。如果你的目标是移动版Safari，那么应该对这些选择器提供良好的支持。

Answer 3

是的，您是否可以使用psudo-class选择器执行此操作，但它肯定不能跨浏览器工作。你可以查看：

http://www.quirksmode.org/css/contents.html

获取哪些浏览器支持哪些选择器的列表。 IE 7及更低版本不支持：焦点选择器，虽然你可以大致完成你想要的东西：悬停（虽然我想你不希望它只在悬停时显示）。

以下示例适用于Firefox（3.5）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<style>
input { float: left; }

/* Make the text hidden when the page loads */
.text_to_show { display:none; }

/* This style affects element which immediately follows the focused class */    
.trigger:focus + div.text_to_show { display: inline; }    

</style>
</head>
<body>

<input type="radio" name="radio" class="trigger" />
<div class="text_to_show">This text is tied to the first radio button.</div>

<input type="radio" name="radio" class="trigger" />
<div class="text_to_show">This text is tied to the 2nd radio button</div>


</body>
</html>

单选按钮选择

3 个答案: