使用JS实现复选框联动与显示隐藏文本框

该资源是一个使用JavaScript和jQuery实现的功能，允许用户通过选择一个复选框来同时选中多个相关的复选框，并且在选中特定复选框后，可以显示相应的文本框供用户输入。 在网页开发中，复选框（checkbox）常用于让用户多选一组选项中的某几个。在这个例子中，目标是实现当用户勾选某个特定的复选框时，其他的复选框也随之被选中，同时与这些复选框关联的文本框会根据复选框的状态显示或隐藏。 首先，HTML部分包含了两个复选框（`#by-email` 和 `#by-phone`），以及它们各自关联的文本框（`#email` 和 `#phone`）。每个文本框后面都跟随了一个隐藏的`<span>`元素，可能用于显示额外的信息或者样式。 接着，引入了jQuery库（`jquery-1.3.2.min.js` 和 `jquery-ui-1.7.custom.min.js`）以及一个自定义的jQuery插件`jquery.alerts.js`和对应的CSS样式表`jquery.alerts.css`，虽然在这个示例中没有直接使用到`jquery.alerts.js`，但可能用于创建弹出提示对话框。 在JavaScript部分，使用了jQuery的`$(document).ready()`函数来确保在DOM加载完成后执行代码。首先，通过`$('input.conditional').hide().next('span').hide();`将所有具有`conditional`类的复选框及其后的`<span>`元素隐藏。然后，对每个复选框设置事件监听器。 当`#by-email`被点击时，会检查它是否被选中（`$("#by-email").attr("checked")==true`）。如果被选中，`#email`文本框和其后的`<span>`会被显示（`show()`），反之则隐藏。同样，对于`#by-phone`，如果被选中，`#phone`也会按照相同的方式处理。 这个功能的实现基于jQuery的选择器、属性检查和DOM操作，可以方便地扩展到更多的复选框和关联元素，只需添加相应的事件监听器即可。这样的设计提高了用户体验，因为用户仅需点击一次就可以影响到多个相关元素，使得交互更为直观和便捷。