Jquery：检查复选框中的选项显示文本框

Question

我有一个checkbox的列表，当用户单击others option时，将打开text field。这在方案1中正常工作，但在方案2中不起作用。 方案1：用户首先选择选项cat，然后选择其他选项，然后文本字段按预期方式显示。 [工精细，文本字段显示如预期] 方案2：如果用户首先选择其他选项（文本字段intially显示），但如果他的文本域隐藏后选择猫选项[文本字段中消失]

请找到下面的代码：

$(".animals").change(function() { 
    //check if its checked. If checked move inside and check for others value 
    if (this.checked && this.value === "other") { 
     //add a text box next to it 
     $("#other-text").show(); 
    } else { 
     //remove if unchecked 
     $("#other-text").hide(); 
    } 
}); 

这是我的小提琴： http://jsfiddle.net/Kritika/XSzKu/

如何使这些信息进行情景2也行？ 在此先感谢。

Answer 1

只是检查，看看是否其他复选框未选中隐藏文本框

$(".animals").change(function() { 
    //check if its checked. If checked move inside and check for others value 
    if (this.checked && this.value === "other") { 
     //add a text box next to it 
     $("#other-text").show(); 
    } 
    else if (!this.checked && this.value === "other") { 
     //remove if unchecked 
     $("#other-text").hide(); 
    } 
}); 

http://jsfiddle.net/XSzKu/1/

Answer 2

您可以使用下面的JS

$(".animals").change(function() { 
    //check if the selected option is others 
    if (this.value === "other") { 
     //toggle textbox visibility 
     $("#other-text").toggle(); 
    } 
});