根据复选框的状态切换文本框的可见性-jQuery答案

【问题标题】：Toggle visibility of text box based on status of check box -jQuery根据复选框的状态切换文本框的可见性-jQuery
【发布时间】：2011-05-22 11:41:10
【问题描述】：

我早些时候在这方面得到了一些帮助，但不知何故我无法再让它工作。如果选中了“其他”复选框，我需要一个文本框出现，并在未选中时消失。有谁知道给了什么？

<!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>&nbsp;</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>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</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>

【问题讨论】：

标签： jquery ajax toggle visibility

【解决方案1】：

试试这个：

$(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();
});

演示：http://jsfiddle.net/karim79/2hw89/1/

【讨论】：

除了 karim79 指出的关于具有相同 id 的多个元素的内容之外，您还有一个未关闭的 <script> 标签。您的 jQuery 中的语法错误，但如果您使用 karim79 的代码，那将得到修复。
我仍然无法让代码工作..我看到它在示例中工作得很好。我已经复制粘贴了，还是没有出现……有什么线索吗？
JS---$(document).ready(function() { $('#other').change(function(){ $('#otherrace').toggle(this.checked ).focus(); }); -------html---

你认为自己是什么种族？请选择所有
其他，请指定