2010-12-08 13 views
2

私はこれを以前に助けていましたが、何とかそれを動作させることができなくなりました。私は、「他の」チェックボックスがチェックされている場合にはテキストボックスを表示し、チェックされていない場合は消えるようにします。誰でも何が得られるか知っていますか?チェックボックスのステータスに基づいてテキストボックスの表示を切り替える-jQuery

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

答えて

3

これを試してみてください:

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

は、それが働いて参照してください:http://jsfiddle.net/karim79/2hw89/

また、あなたは無効あるドキュメント内= "その他" idを持つ2つの要素を持っています。

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

最後に、あなたはこのように、その上に家に持っていることから、ユーザーを保存、チェックボックスがチェックされている「その他」のテキスト入力に着目しほんの少しより多くの使用可能なフォームを作ることができます

デモ:http://jsfiddle.net/karim79/2hw89/1/

+0

同じidを持つ複数の要素に関してkarim79が指摘したことに加えて、閉じられていない「

関連する問題