个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我之前在这方面得到了一些帮助，但不知何故我无法再让它工作了。如果选中“其他”复选框，我需要出现一个文本框，如果未选中该文本框，则该文本框消失。有谁知道有什么作用吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Even More Rounded Corners (Single Image Approach) Using CSS - Simple Example</title>
<link rel="stylesheet" href="demo/dialog.css" media="screen" />
<style type="text/css">
/* basic formatting */
body {font:76% normal verdana,tahoma,arial,"sans serif";}
h1 {font:2.5em georgia,"times new roman",helvetica,verdana,"sans serif";}
p {line-height:1.6em;}
</style>
<script type="text/javascript" src="jquery.js">
<script type="text/javascript">
$(document).ready(function() { $('#other').change(function(){
$('#otherrace').parent().toggle( this.checked );
});
</script>
</head>
<body>
<div id="demo">
<!-- most basic example -->
<div class="dialog">
<div class="content">
<div class="t"></div>
<!-- Your content goes here -->
<br/><br/><br/><br/><br/>
<form id="form1" method="post" action=""><table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="16%">First Name</td>
<td width="32%"><input type="text" name="fname" size="25" maxlength="25" /></td>
<td width="9%">Street</td>
<td width="24%"><input type="text" name="street" size="40" /></td>
</tr>
<tr>
<td>MI</td>
<td><input type="text" name="mi" size="3" maxlength="1" /></td>
<td>City</td>
<td><input type="text" name="city" size="30" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="fname" size="25" maxlength="25" /></td>
<td>County</td>
<td> </td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="age" size="5" maxlength="3" /></td>
<td>ZIP</td>
<td><input name="zip" type="text" size="5" maxlength="7" /></td>
</tr>
<tr>
<td><p>Gender</p>
<p> </p></td>
<td>
<p></p>
<p>
<label>
<input type="radio" name="gender" value="female" id="gender_0" />
</label>
Female<br />
<label>
<input type="radio" name="gender" value="male" id="gender_1" />
Male</label>
<br />
</p>
<p></p>
</td>
<td> </td>
<td> </td>
</tr>
</table>
<p>What race do you consider yourself? Please choose all that apply.</p><input type="checkbox" name="race" value="asian" />Asian<br /><input type="checkbox" name="race" value="hawaii" />Native Hawaiian or other Pacific Islander<br /><input type="checkbox" name="race" value="noanswer" />Choose not to answer<br /><input type="checkbox" name="race" value="other" id="other" />Other, specify<br /><div id="other"><input style="display:none;" type="text" size="25" maxlength="25" id="otherrace" /></div><br />
<div id="race"></div>
<br/><br/>
<br/><br/><br/><br/>
<p align="right"><input type="button" align="right" value="Next page" onclick="window.location.href='registry2.html'" /></p>
</form>
<br/>
<br/><br/><br/>
</div>
<div class="b"><div></div></div>
</div>
</body>
</html>
最佳答案
试试这个:
$(document).ready(function() {
$('#other').change(function(){
$('#otherrace').toggle(this.checked);
});
});
查看其工作情况:http://jsfiddle.net/karim79/2hw89/
此外，您的文档中有两个 id="other"的元素，这是无效。
最后，您可以在选中复选框时关注“其他”文本输入，从而使您的表单更加可用，从而使用户不必关注它，如下所示:
$('#other').change(function(){
$('#otherrace').toggle(this.checked).focus();
});
关于jquery - 根据复选框的状态切换文本框的可见性 -jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4392169/
28
4
0
我是一名优秀的程序员,十分优秀！