Jquery函数用于复选框其他选项

Question

我有一个只有复选框的表单，我最后还有另一个选项。我想在检查其他选项时打开文本框或textarea，用户可以在其中编写自己的文本。

Answer 1

使用复选框

的解决方案

方法1 - 创建＆＃34;输入＆＃34;在运行中，取消选中时将其删除。

简单，真的。您有一个如下所示的复选框组：

<h3>Which animal do you like the most?</h3>

<input type="checkbox" value="cats" id="cats" name="animals" class="animals" />
<label for="cats">cats</label>
<br/>
<!--extra checkboxes-->
<input type="checkbox" value="other" id="other" name="animals" class="animals" />
<label for="other">other</label>

然后，您要为此写一个更改事件：

$(".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
        $(this).next("label").after("<input id='other-text' placeholder='please enter animal' type='text'/>")
    } else {
        //remove if unchecked
        $("#other-text").remove();
    }
});

演示：http://jsfiddle.net/hungerpain/KqRpM/

（更好更清洁）方法2 - 保持＆＃34;输入＆＃34;在DOM中，选中/取消选中时隐藏/显示

您的标记会在最后<input>之后有额外label：

<input type="checkbox" value="other" id="other" name="animals" class="animals" />
<label for="other">other</label>
<input id='other-text' placeholder='please enter animal' type='text' />

在开头使用css隐藏other-text：

#other-text{
  display: none;
}

然后你看起来像JS：

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

演示：http://jsfiddle.net/hungerpain/KqRpM/1/

使用单选按钮的解决方案

但是那说，在你的情况下，如果它是一个单选按钮组则更好。只需将标记从type=checkbox更改为type=radio即可。 JS与方法1复选框保持一致。

演示：http://jsfiddle.net/hungerpain/XzaRP/