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