Javascript 单选按钮选择_Javascript_Html_Ajax

Javascript 单选按钮选择

javascript html ajax

Javascript 单选按钮选择,javascript,html,ajax,Javascript,Html,Ajax,我想在单击单选按钮时显示几个文本字段，我该怎么做？没有JavaScript或AJAX。您必须为此使用JavaScript。除了JavaScript之外，唯一可行的方法（我没有尝试过，但需要研究）是在CSS中使用JavaScript。即使它能工作，可能也不会是跨浏览器的，但由于您针对的是特定的移动平台，所以它可能没问题。它的工作原理如下： <style> #bar { display:none; } #foo:selected #bar { display:block;

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

您必须为此使用JavaScript。

除了JavaScript之外，唯一可行的方法（我没有尝试过，但需要研究）是在CSS中使用JavaScript。即使它能工作，可能也不会是跨浏览器的，但由于您针对的是特定的移动平台，所以它可能没问题。它的工作原理如下：

<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>


#条{显示：无；}
#foo:selected#bar{display:block；}
这里有东西

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

无论如何，还是要尝试一下。如果您的目标是mobile Safari，它应该对此类选择器有良好的支持。

是的，您可以使用psudo类选择器来实现这一点，但它肯定无法跨浏览器工作。您可以检查：

查看哪些浏览器支持哪些选择器的列表。IE7和更低版本不支持：焦点选择器，尽管您可以通过：hover大致实现您想要的功能（尽管我想您不希望它只在hover上显示）

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


输入{float:left；}
/*在页面加载时隐藏文本*/
.text_至_显示{显示：无；}
/*此样式影响紧跟在焦点类之后的元素*/
.trigger:focus+div.text_to_show{display:inline；}
此文本绑定到第一个单选按钮。
此文本绑定到第二个单选按钮

恐怕没有。顺便说一句，你为什么要限制自己？这是一个挑战性的家庭作业吗？我正在做一个移动应用程序，在这里我不应该使用java脚本，它应该在浏览器中运行吗？或者我们只是假设了错误的事情？为什么不试试

#foo:focus+label{display:block；}

我无法复制相同的内容。我在选择上有单选按钮，我应该显示一个文本字段。

<!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>