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

Question

所以我有一份调查表的比赛清单。对于那些不符合任何其他标准的人，有一个名为“其他指定”的框。我需要一本教科书在选中“其他指定”时变得可见，并在未选中时消失。我已经能够使该框在选中另一个框时出现，但在未选中时不会消失。任何帮助将不胜感激。谢谢。

---

脚本

<script type="text/javascript" src="jquery.js">
 <script language="JavaScript">

 $(function(){ 
  $('#other').click(function(){ 
  $('#otherrace').toggle(
          function(event) {
            $(event.target).css('visible');
          },
          function(event) {
            $(event.target).css('hidden');
          }
        );
      });


    </script>

---

html

<input type="checkbox" name="race"  id="other"value="other" />Other, specify<br />
<div style="visibility:hidden" id="race"><input type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div>

Answer 1

这样做：

示例： http://jsfiddle.net/patrick_dw/K3kvE/

$('#other').change(function(){ 
    $('#otherrace').parent().css( 'visibility', this.checked ? 'visible' : 'hidden' );
});

或使用 display:none 而不是 visibility:hidden 并执行以下操作：

示例： http://jsfiddle.net/patrick_dw/K3kvE/1/

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

您使用的方式 .toggle() 是一个“切换事件”，这意味着您有效地分配了一个切换的点击事件在执行您传递给它的函数之间。

因为它是被隐藏的 otherrace 的父级，所以您需要使用 .parent()，然后将其 visibility 属性设置为 hidden 或 visible，具体取决于复选框的状态。

第二种解决方案从使用 visibility 属性更改为使用 display ，以便 toggle() 可以以不同的方式调用。现在调用它的方式，它在 show() 和hide()，设置显示属性从 none 到其原始设置并返回。