Javascript 告诉用户在表单的特定步骤中要做什么

我有一个步骤表单，用户应该在每个步骤中填写所需的数据，以便能够进入下一步，这是工作良好

但是有一个步骤，一些用户不知道在这个步骤中要做什么，有3个复选框，用户应该至少选中其中一个，然后输入相关数据以进入下一步

用户可以选择所有3个复选框，但他必须输入所有3个相关数据，因此无论何时选中复选框，相关数据都应归档以进入下一步

我试图只提供相关的代码，所以它的功能不好，但它会显示我的意思

这是一把小提琴：

代码如下：

函数HIDEALLCHILDENBUTONEPARENTID，toRevealId{ $+parentId.children.css'display'，'none'； $+toreRevelid.css'display'，'block'； } 函数showSectionparentId、ToRevelid、self{ var relatedSection=$+ToRevelid.attr'data-section'； ifself.is'：已选中'{ $'.relative_container'.css'display'，'block'； $+ToRevelid.addClass'inline-block'； $+ToRevelid.addClass“tab_活动”； $+toreRevelid.sides.removeClass'tab_active'； $+relatedSection.sides.removeClass'active'； $+relatedSection.addClass'block'； $+relatedSection.addClass“活动”； } 如果$+self.attr'data-header'.hasClass'tab\u active'{ 变量计数=$。选项卡标题：visible.length； ifself.is'：选中“==false&&count>0{ $.tab标题：可见：first.addClass'tab_active'； $+$选项卡标题：可见：first.attr'data-section'。addClass'active'； } } ifself.is'：选中“==false{ $+ToRevelid.removeClass'inline-block'； $+ToRevelid.removeClass'tab_active'； $+relatedSection.removeClass'block'； $+relatedSection.removeClass'active'； if！$.tab标题：visible.length{ $'.relative_container'.css'display'，'none'； } } } $document.readyfunction{ $“.tab标题”。单击函数事件{ $this.addClass'tab_active'。同胞。removeClass'tab_active'； var related_section=$this.attr'data-section'； HidealChildren只有一个“相对内容”，相关部分； }; $input[name='section[]'].changefunction{ var self=$this； showSection'relative_tabs'，self.attr'data-header'，self； 如果！$。选项卡_活动。长度{ $input[name='section[]']。单击。单击； } }; }; 保险商实验室{ 边距块开始：1em； 边缘块端部：1米； 边距内联开始：0px； 边距内联端：0px； 填充内联开始：0； } .隐藏{ 显示：无； } .内联块{ 显示：内联块； } .街区{ 显示：块； } .stepContainer{ 显示：块； 位置：相对位置； 保证金：0； 填充：0； 边框：0px实心CCC； /*溢出：隐藏*/ 明确：两者皆有； /*高度：400px*/ } .stepContainer分区内容{ 显示：块； 位置：相对位置； 浮动：左； 保证金：0； 填充物：5px； 边框：1px实心CCC； 字体：普通13px Verdana，Arial，Helvetica，无衬线； 颜色：5A5655； 背景色：F8； /*高度：650px*/ 文本对齐：左对齐； 溢出：可见； z指数：88； -webkit边界半径：5px； -moz边界半径：5px； 宽度：908px； 明确：两者皆有； } 运输署{ 宽度：360px； } .复选框con{ 文本对齐：居中； 利润率：15px自动； } .checkbox.txt{ 字体：普通13px Verdana，Arial，Helvetica，无衬线； 颜色：5A5655； 字体大小：粗体； 右边距：5px； 边际下限：10px } .复选框标签{ 字体：普通13px Verdana，Arial，Helvetica，无衬线； 颜色：5A5655； 右边距：5px； 光标：指针； } .复选框标签输入{ 垂直对齐：中间对齐； } .相对集装箱{ 显示：无； 位置：相对位置； 填充：45px 15px 15px； 利润率：0-15px 15px； 边框颜色：E5EEEEE； 边框样式：实心； 边框宽度：1px0； -webkit盒阴影：插入0 3px 6px rgba0,0,0.05； 盒影：插入0 3px 6px rgba0,0,0,05； } @介质最小宽度：768px{ .相对集装箱{ 右边距：0； 左边距：0； 背景色：fff； 边框颜色：ddd； 边框宽度：1px； 边界半径：4px4p0； -webkit盒阴影：无； 盒影：无； } } .相对标签{ 边缘底部：15px； 边框底部：1px实心ddd； 列表样式：无； 填充：7px0； } .相对选项卡：之前{ 显示：表格； 内容：； } .选项卡标题{ 显示：无； 边缘底部：-1px； } .选项卡标题>a{ 右边距：2px； 线高：1.42857143； 边框：1px实心透明； 边界半径：4px4p0； 填充：9px 15px； 文字装饰：无； 光标：指针； } .tab标题.tab_活动>a{ 颜色：555； 光标：de 过错 背景色：fff； 边框：1px实心ddd； 边框底色：透明； } .相对内容部{ 显示：无； } .txtBox{ 边框：1px实心中交； 颜色：5A5655； 字体：13px Verdana，Arial，Helvetica，无衬线； 填充：2px； 宽度：430px； } .txtBox：焦点{ 边框：1px实心EA8511； } dobBox先生{ 边框：1px实心中交； 颜色：5A5655； 字体：13px Verdana，Arial，Helvetica，无衬线； 填充：2px； 宽度：30%； } .TXT区域{ 宽度：100%； } .相对内容>分区活动{ 显示：块； } .选项卡内容{ 显示：无； } 请至少单击以下复选框之一 并填写相关数据： 第一 第二 第三 第一 第二 第三 第一秒 姓名： 秒 姓名： 第三秒 姓名：

---

设计智慧，我只考虑有三个文本字段，如果用户输入一个字符串，那么它就被隐式地勾选，如果用户把它留下空白，它的隐含性就不会被勾掉。 功能验证{ const choiceA=$'input[name=a]'.val； const choiceB=$'input[name=a]'.val； const choiceC=$'input[name=a]'.val； const isValid=choiceA.length | | choiceB.length | | choiceC.length； $'button.submit'.propdisabled，！isValid； } 提交

---

对于Meth来说，这个问题有点不清楚。考虑到对用户体验/用户界面的关注，这个问题似乎更适合；虽然您需要阅读他们的帮助页面才能确定。@GrumpyCrouton，我想让用户知道在这一步中如何处理复选框，因为这一步似乎不清楚them@DavidThomas，我不知道，不幸的是，每个部分都有1个输入，每个部分大约有5-7个输入，您将在第二步中找到checkobxes，代码在那里工作，因此您可以看到它现在的工作方式。一种方法是为每个家庭成员创建一行，每行上都有一个adddetails按钮。单击按钮时，它会展开行以显示所有输入字段和一个再次删除这些字段的按钮。