选中“其他”复选框时显示文本框

基础概念

在用户界面设计中，复选框（Checkbox）是一种常见的表单元素，允许用户从多个选项中选择一个或多个选项。当用户选中特定的复选框时，显示或隐藏其他界面元素（如文本框）是一种常见的交互设计模式，用于动态调整用户界面以适应用户的输入需求。

类型与应用场景

类型：这种交互通常通过JavaScript实现。
应用场景：
- 用户注册表单中，可能需要用户填写额外的个人信息。
- 调查问卷中，某些问题可能只在特定条件下适用。
- 订单处理系统中，可能需要用户填写额外的备注或说明。

示例代码

以下是一个简单的HTML和JavaScript示例，展示了如何在选中“其他”复选框时显示一个文本框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Example</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <form>
        <label>
            <input type="checkbox" id="otherCheckbox"> 其他
        </label>
        <div id="otherDetails" class="hidden">
            <label for="otherText">详细说明:</label>
            <input type="text" id="otherText">
        </div>
    </form>

    <script>
        document.getElementById('otherCheckbox').addEventListener('change', function() {
            var details = document.getElementById('otherDetails');
            if (this.checked) {
                details.classList.remove('hidden');
            } else {
                details.classList.add('hidden');
            }
        });
    </script>
</body>
</html>

解释与解决方法

解释：当用户选中“其他”复选框时，JavaScript监听到这一变化，并移除文本框的hidden类，使其显示出来。反之，如果复选框未被选中，则添加hidden类，隐藏文本框。
解决方法：确保HTML结构正确，JavaScript事件监听器绑定到正确的元素，并且CSS类hidden正确地控制元素的显示与隐藏。

通过这种方式，可以实现动态调整用户界面，提升用户体验和表单的灵活性。

Ektron Smartfrom定义中的自定义验证

、

我的smartform定义中有一个复选框和文本框字段，只有在复选框选中属性为true时，我才需要将文本框设为只读。smartform编辑器字段中提供的自定义验证选项没有任何这样的选项。

浏览 0提问于2013-05-31得票数 0

回答已采纳

1回答

当选中特定asp:CheckBoxList ListItem时，需要asp:TextBox

、、、、

在选中CheckBoxList中的特定复选框时，我没有发现任何要求填写文本框的示例。我发现了很多独立CheckBoxes的例子。当用户选中复选框列表中的“其他”框时，我需要用户完成相关的文本框。根据选中的文本框显示/隐藏文本框将是很好的。

浏览 4提问于2017-03-24得票数 0

回答已采纳

1回答

Angularjs ng-在jsp中默认值为true的复选框中显示不工作

、、

=cat4%>" placeholder="Enter Price per <%=cat2%>" value="<%=temps[i]%>"></td> 当复选框被选中时，我想显示文本框。默认情况下，该复选框处于选中状态。如果未选中该复选框，则应隐藏该文本

浏览 0提问于2016-04-10得票数 0

2回答

选中一个框后未隐藏的对象在选中另一个框时不会消失

、、、

所以这是我用来制作它的代码，所以某个类的任何复选框都只能在同一个类的其他选项中选择一个。on("click", function() {});除了，其中一些复选框在选中时会显示对象，如文本框或文本区域。问题是，除非在选中其他框之前手动取消选中<

浏览 2提问于2016-06-11得票数 0

1回答

MVVM -选中复选框时绑定到复选框

、

我希望将字符串值绑定到文本框，但仅当复选框处于选中状态时。因此，如果复选框被选中，我希望文本框显示消息1，如果没有，则显示消息2。或在选中复选框后更新对象的属性(这次是string类型)，然后重新绑

浏览 4提问于2012-06-16得票数 7

回答已采纳

5回答

基于复选框显示/隐藏文本框

、

我在试着做一个文本框。当复选框被选中时，文本框应该是shown.but，当复选框被取消选中时，文本框应该是remove.This，这是我如何实现的，所以far.When I clikc on复选框时，它会显示文本框。现在我想知道如何在未选中复选框时删除文本框&l

浏览 0提问于2015-09-25得票数 0

1回答

admin-on-rest:如果其他文本框值为空，则删除传递到后端的post数据数组中的文本框字段

我找不到一种方法来阻止一个文本框字段基于其他文本框值传递到后端。注意:无论是否选中复选框，电子邮件字段都必须始终显示。

浏览 0提问于2018-02-02得票数 0

1回答

使用绑定使textbox响应Cocoa中的复选框

我做了一个有复选框和文本框的程序。如果用户选中该复选框，则文本框将显示“您选中了该复选框”。如果用户取消选中该复选框，则文本框显示"you uncheck the textbox“。

浏览 0提问于2010-07-08得票数 0

1回答

Cocoa中复选框的状态

在Interface Builder中，我创建了一个复选框和一个文本框。当用户选中复选框时，我希望在textobx中出现一条消息，上面写着“复选框已选中”。如果该框未选中，我希望在文本框中显示一条消息，说明“该复选框未选中”。问题是我不知道如何获取checkbox的状态。

浏览 2提问于2010-07-08得票数 11

回答已采纳

1回答

切换Select中出现的值

、、

如何切换显示在此选择标记示例中的值. 如果我在列表中选择了CodeforHumans556，那么将出现的值是556，如果我选择了，那么在选中框中出现的值将是556。我该怎么做？我是否需要一个javascript或其他东西来添加选择标记？

浏览 3提问于2013-08-24得票数 0

2回答

当复选框仍处于选中状态时，将消息保留在文本框中

、

我有3个复选框，在文本框中有相应的消息。我的老师希望消息在复选框仍处于选中状态时保留在文本框中，而在未选中时隐藏文本。在我的例子中，当我选中这3个复选框时，它们对应的3个消息将会出现，但当我取消选中其中一个复选框，而其他两个复选框仍处于选中状态时，所有消息都将消失。我的问题是，当我取消

浏览 1提问于2012-12-10得票数 1

回答已采纳

1回答

如何在不自动返回的情况下将复选框选中值插入到文本框中

、

我有无限的asp.net复选框到我的网页.How插入复选框选中的值到文本框而不自动返回。我选中checkbox1和checkbox2，然后在文本框中显示为1,2 ...and，当我取消选中checkbox1时，文本框中的值将为2。如果取消选中checkbox1和checkbox2，则文本框中的值为空

浏览 1提问于2010-11-27得票数 0

回答已采纳

1回答

用户单击后退按钮时显示错误信息

、

在页面上放置asp.net复选框，在同一页面上放置asp.net文本框。在代码后台(使用vb.net)中，将选中复选框时在文本框中显示内容的代码放入代码中，而在未选中复选框时显示空文本框的代码中。现在，在选中/取消选中复选框的情况下来回切换几次，文本框有内容/没有内容。一切都很好，对吧？现

浏览 0提问于2012-07-05得票数 3

回答已采纳

1回答

如何在选中复选框时显示文本框中的特殊字符

、、

我想在文本框中显示特殊字符。1.首先，当我们选中下面名为special characters.Then的复选框时，文本框中的特殊字符应该是一致的。2.选中复选框后，在文本框中键入特殊字符，然后它应该显示agree.if而不是它必须显示错误信息。有谁可以帮我？

浏览 5提问于2017-11-21得票数 0

1回答

单击提交按钮时，在转发器中禁用选中的复选框

我想在用户单击ASP.NET中的提交按钮时禁用选中的复选框。我可以使用JavaScript通过该按钮的onclick事件禁用复选框。复选框在中继器中。当通过单击“提交”按钮提交表单时，代码隐藏按钮中的任何复选框都不会显示为选中状态。如何在单击提交按钮时禁用选中的复选框，并在提交页面时仍然看到复选框处于选中状态？有没有什么办法呢？

浏览 1提问于2012-06-16得票数 2

2回答

如果使用jQuery选中复选框，如何禁用文本框？

、、

如果用户取消选中复选框并更改文本框的背景颜色，我希望禁用文本框。如果用户选中复选框，则该文本框应可编辑并更改为白色。(".ba").click(function () { });如果.ba是复选框，.tex是textbox类，那么现在当用户单击它更改

浏览 1提问于2013-05-25得票数 4

回答已采纳

2回答

将其他选项添加到Pardot中的复选框

、

我想知道是否可以在pardot表单的复选框中添加一个"other“选项。用户必须能够键入他们想要的任何其他选项1)篮球3)高尔夫这个特性是pardot内置的吗?还是我需要在之后使用一些逻辑并使用一个单独的文本框(如果文本框被填充，忽略复选框并获取文本框的值)

浏览 1提问于2015-02-10得票数 0

1回答

使用JSON将i.d分配给元素

、

我只是想知道是否有任何方法可以在JSON中为复选框指定is，这样我就可以在JQuery中使用此is来确保在选中/选中复选框时执行某些操作。此复选框是使用JSON创建的。如果有一种方法可以给创建的复选框分配一个if，那么我就可以更容易地使用JQuery，并在选中复选框时分配一个类似'listener‘的操作。我所要做的就是，当标签为“我想提供输入”的复选框被选中时

浏览 1提问于2013-02-01得票数 0

回答已采纳

2回答

将文本框值传递给复选框值

、、

我有一个表单，其中有一个问题，答案是复选框，在最后一个答案中有另一个请指定选项，当我选中该复选框时，文本框启用，我可以在其中填写内容。我的答案保存在array.But中，现在问题是什么，当我提交表单时，我想要其他选项的值，请指定选项为文本框的值，该值是在选中该选项时填充的。

浏览 0提问于2011-03-21得票数 0

回答已采纳

2回答