jquery - 复选框其他选项的Jquery函数

Question

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

Answer 1

使用复选框的解决方案

方法 1 - 即时创建“输入”，未选中时将其删除。

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

<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 - 在 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' />

在other-text开始时使用 css 隐藏的地方：

#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/