单选按钮选择

Question

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

Answer 1

您必须为此使用JavaScript。

Answer 2

除了JavaScript的唯一的其他东西可能工作（我还没有尝试过，但它的东西进行调查）是使用：focus伪类的CSS。 即使它可以工作，也可能不会在跨浏览器中使用，但是由于您的目标是特定的移动平台，因此可以。 它将像这样工作：

<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和更低版本不支持：focus选择器，尽管您可以使用：hover大致完成所需的操作（尽管我想您不希望它仅在悬停时显示）。

以下示例在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 个解决方案

解决方案1
1 2009-12-30 05:16:48

解决方案2
0 2009-12-30 05:46:24

解决方案3
0 2009-12-30 09:32:36

单选按钮选择

问题描述

3 个解决方案

解决方案1 1 2009-12-30 05:16:48

解决方案2 0 2009-12-30 05:46:24

解决方案3 0 2009-12-30 09:32:36

解决方案1
1 2009-12-30 05:16:48

解决方案2
0 2009-12-30 05:46:24

解决方案3
0 2009-12-30 09:32:36