文本框的基础上的复选框状态切换的知名度-jQuery [英] Toggle visibility of text box based on status of check box -jQuery

查看：102
本文介绍了文本框的基础上的复选框状态切换的知名度-jQuery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一些帮助，这一点早，但不知何故，我再也无法得到它的工作。我需要它未选中文本框时，如果一个其他复选框出现，并dissappear。任何人都知道怎么办？

 ＆LT;！DOCTYPE HTML PUBLIC -  // W3C // DTD XHTML 1.0 Strict标准// EN
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
＆LT; HTML的xmlns =htt​​p://www.w3.org/1999/xhtml郎=ENXML：LANG =EN＆GT;
＆LT; HEAD＆GT;
＆LT;冠军＆GT;更圆角（单幅图像的方法）使用CSS  - 简单的例子＆LT; /标题＆GT;
＆LT;链接相对=样式表的href =演示/ dialog.css媒体=屏幕/＆GT;

＆LT;风格类型=文本/ CSS＆GT;
/ *基本的格式* /
身体{字体：76％的普通宋体，宋体，Arial字体，无衬线;}
H1 {字体：2.5em格鲁吉亚，宋体，黑体，宋体，无衬线;}
p {line-height的：1.6em;}
＆LT; /风格＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =jquery.js和＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{$（'＃等）。改变（函数（）{
    。$（'＃otherrace）父（）切换为（this.checked）;
}）;
＆LT; / SCRIPT＆GT;


＆LT; /头＆GT;

＆LT;身体GT;

＆LT; D​​IV ID =演示＆GT;

＆LT;！ - 最基本的例子 - ＆GT;
＆LT; D​​IV CLASS =对话框中的＆GT;
 ＆LT; D​​IV CLASS =内容＆GT;
  ＆LT; D​​IV CLASS =T＆GT;＆LT; / DIV＆GT;
  ＆LT;！ - 你的内容放在这里 - ＆GT;
  ＆LT; BR /＆GT;＆LT; BR /＆GT;＆LT; BR /＆GT;＆LT; BR /＆GT;＆LT; BR /＆GT;
  ＆LT;表格ID =Form1上的方法=邮报行动=＆GT;＆LT;表格的宽度=100％的边界=0CELLSPACING =1的cellpadding =0＆GT;
  ＆其中; TR＆GT;
    ＆所述; TD宽度=16％＆gt;首先姓名和其中; / TD＆GT;
    ＆LT; TD宽度=32％＆GT;＆LT;输入类型=文本名称=FNAME大小=25最大长度=25/＆GT;＆LT; / TD＆GT;
    ＆LT; TD宽度=9％＆GT;街＆LT; / TD＆GT;
    ＆LT; TD宽度=24％＆GT;＆LT;输入类型=文本名称=街道大小=40/＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
  ＆其中; TR＆GT;
    ＆LT; TD＆GT; MI＆LT; / TD＆GT;
    ＆LT; TD＆GT;＆LT;输入类型=文本名称=米大小=3最大长度=1/＆GT;＆LT; / TD＆GT;
    ＆LT; TD＆GT;城市和LT; / TD＆GT;
    ＆LT; TD＆GT;＆LT;输入类型=文本名称=城市大小=30/＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
  ＆其中; TR＆GT;
    ＆LT; TD＆GT;姓＆LT; / TD＆GT;
    ＆LT; TD＆GT;＆LT;输入类型=文本名称=FNAME大小=25最大长度=25/＆GT;＆LT; / TD＆GT;
    ＆LT; TD＆GT;县及LT; / TD＆GT;
    ＆LT; TD＆GT;＆安培; NBSP;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
  ＆其中; TR＆GT;
    ＆LT; TD＆GT; DOB＆LT; / TD＆GT;
    ＆LT; TD＆GT;＆LT;输入类型=文本名称=年龄大小=5最大长度=3/＆GT;＆LT; / TD＆GT;
    ＆LT; TD＆GT;邮政编码：LT; / TD＆GT;
    ＆LT; TD＆GT;＆LT;输入名称=拉链式=文字大小=5最大长度=7/＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
  ＆其中; TR＆GT;
    ＆LT; TD＆GT;＆LT; P＆GT;性别＆LT; / P＆GT;
      ＆其中p为H.;＆安培; NBSP;＆所述; / P＆GT;＆所述; / TD＆GT;
    ＆LT; TD＆GT;
      ＆其中p为H.;＆所述; / P＆GT;
      ＆其中p为H.;
        ＆LT;标签＆gt;
          ＆LT;输入类型=无线电名称=性别值=女ID =gender_0/＆GT;
          ＆LT; /标签＆gt;
        女＆LT; BR /＆GT;
        ＆LT;标签＆gt;
          ＆LT;输入类型=无线电名称=性别值=男ID =gender_1/＆GT;
          男＆LT; /标签＆gt;
        ＆LT; BR /＆GT;
      ＆所述; / P＆GT;
      ＆其中p为H.;＆所述; / P＆GT;
   ＆LT; / TD＆GT;
    ＆LT; TD＆GT;＆安培; NBSP;＆LT; / TD＆GT;
    ＆LT; TD＆GT;＆安培; NBSP;＆LT; / TD＆GT;
  ＆LT; / TR＆GT;
  ＆LT; /表＆gt;


＆LT; P＆GT;什么比赛你认为自己？请选择所有适用＆LT; / P＆GT;＆LT;输入类型=复选框名称=种族值=亚洲/＆GT;亚洲＆LT; BR /＆GT;＆LT;输入类型=复选框名称=比赛值=夏威夷/＆GT;夏威夷原住民或其他太平洋岛民＆LT; BR /＆GT;＆LT;输入类型=复选框名称=种族值=noanswer/＆GT;选择不回答＆LT; BR /＆GT; ＆LT;输入类型=复选框名称=种族值=其他ID =其他/＆gt;其他指定＆LT; BR /＆GT;＆LT; D​​IV ID =其他＆GT;＆LT;输入类型=显示：无;类型=文字大小=25最大长度=25ID =otherrace/＆GT;＆LT; / DIV＆GT;＆LT; BR /＆GT;
＆LT; D​​IV ID =种族＆GT;＆LT; / DIV＆GT;
＆LT; BR /＆GT;＆LT; BR /＆GT;
＆LT; BR /＆GT;＆LT; BR /＆GT;＆LT; BR /＆GT;＆LT; BR /＆GT;

＆LT; p ALIGN =权利与GT;＆LT;输入类型=按钮ALIGN =正确的价值=下一页的onclick =window.location.href ='registry2.html'/＆GT;＆LT; / P＆GT;




＆LT; /形式GT;


  ＆LT; BR /＆GT;



  ＆LT; BR /＆GT;＆LT; BR /＆GT;＆LT; BR /＆GT;
 ＆LT; / DIV＆GT;
 ＆LT; D​​IV CLASS =B＆GT;＆LT; D​​IV＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;


＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

试试这个：

  $（文件）。就绪（函数（）{
    $（'＃等）。改变（函数（）{
        $（'＃otherrace）切换为（this.checked）;
    }）;
}）;

请参阅它的工作： http://jsfiddle.net/karim79/2hw89/

此外，你有两个元素的id =其他的文件，这是的无效的。

在

最后，你可以让你的表单更可用通过集中复选框被选中时，其他的文字输入，不必在家中就可以节省用户，这样一点点：

  $（'＃等）。改变（函数（）{
    $（'＃otherrace）切换（this.checked）.focus（）。
}）;

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

I had some help with this earlier and yet somehow I can no longer get it to work. I need a text box to appear if an 'other' check box is checked, and dissappear when it isn't checked. Anyone know what gives?

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

解决方案

Try this:

$(document).ready(function() { 
    $('#other').change(function(){ 
        $('#otherrace').toggle(this.checked);
    });
});

See it working: http://jsfiddle.net/karim79/2hw89/

Also, you have two elements with id="other" in your document, which is invalid.

Lastly, you can make your form a tiny bit more usable by focusing on the 'other' text input when the checkbox is checked, saving the user from having to home in on it, like this:

$('#other').change(function(){ 
    $('#otherrace').toggle(this.checked).focus();
});

Demo: http://jsfiddle.net/karim79/2hw89/1/

这篇关于文本框的基础上的复选框状态切换的知名度-jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆