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/

Jquery：勾选复选框中的选项显示一个文本框

2 个答案: