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

Question

我有一个列表checkbox，当用户单击 时others option，会text field打开一个。这在场景 1 中工作正常，但在场景 2 中不起作用。 场景 1：用户首先选择选项 cat，然后选择其他选项，然后文本字段按预期显示。[工作正常，文本字段按预期显示] 场景 2：如果用户首先选择其他选项（文本字段最初显示），但如果他在该文本字段隐藏后选择 cat 选项。[文本字段消失]

请找到以下代码：

$(".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

你可以使用下面的 JS

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

Answer 2

只需在隐藏文本框之前检查其他复选框是否未选中

$(".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/