嵌套我的表单 - 带有单选按钮的 JavaScript 条件
Posted
技术标签:
【中文标题】嵌套我的表单 - 带有单选按钮的 JavaScript 条件【英文标题】：Nesting my form - JavaScript conditions with radio buttons 【发布时间】：2017-05-14 00:49:11 【问题描述】：我有一个这样的表单：选择 2 个选项中的一个，它应该根据第一个选择显示不同的选项集。选择时，这些选项中的每一个都会要求提供更多信息。这是脚本：
jQuery(document).ready(function($)
// bind event handler to the checkbox
$('input[name="Payer Type"]').change(function()
// get input element where name attribute is starts with the checkbox value
// and then toggle the visibility based on the checked property
$('input[name^="' + this.value + '"]').toggle(this.checked);
// trigger the change event
).change();
);
$("[name=Type_of_Change]").change(function()
$("#Termination_Type").toggle($("[name=Type_of_Change]").index(this) === 0);
$("#Active_Status_Change").toggle($("[name=Type_of_Change]").index(this) === 1);
);
$("[name=Termination_Type]").change(function()
$("#Death").toggle($("[name=Termination_Type]").index(this) === 0);
$("#Discharge").toggle($("[name=Termination_Type]").index(this) === 1);
$("#Revocation").toggle($("[name=Termination_Type]").index(this) === 2);
$("#Transfer").toggle($("[name=Termination_Type]").index(this) === 3);
);
$("[name=Active_Status_Change]").change(function()
$("#Location").toggle($("[name=Active_Status_Change]").index(this) === 0);
$("#Level_of_Care").toggle($("[name=Active_Status_Change]").index(this) === 1);
$("#Diagnosis").toggle($("[name=Active_Status_Change]").index(this) === 2);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="#Type_of_Change"><strong>Type of Change</strong>
<input class="validate[required]" name="Type of Change" type="radio" value="Termination" id="Type_of_Change" />Termination
<input name="Type of Change" type="radio" value="Active Status Change" id="Type_of_Change" />Active Status Change </div>
<div style="clear:both"> </div>
<div id="#Termination_Type" style="display:inline; margin-bottom:15px;"><b>Termination</b>
<input class="validate[required]" id="Termination_Type" name="Termination_Type" type="radio" value="Death" />Death
<input name="Termination_Type" type="radio" value="Discharge" />Discharge
<input name="Termination_Type" type="radio" value="Revocation" />Revocation
<input name="Termination_Type" type="radio" value="Transfer" />Transfer</div>
<div id="Death" style="display:none; margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong> <br />
<input class="validate[required]" id="Date of Death" name="Date of Death" placeholder="Date of Death" type="text" /> </span> <span style="width:25%; float:left"><strong>Time</strong><br />
<input class="validate[required]" id="Time of Death" name="Time of Death" placeholder="Time of Death" type="text" /> </span>
</div>
</div>
<div id="Discharge" style="display:none; margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong> <br />
<input class="validate[required]" id="Discharge Date" name="Discharge Date" placeholder="Discharge Date" type="text" /> </span> <span style="width:25%; float:left"><strong>Reason</strong> <br />
<input class="validate[required]" id="Discharge Reason" name="Discharge Reason" placeholder="Discharge Reason" type="text" /> </span>
</div>
</div>
<div id="Revocation" style="display:none; margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong> <br />
<input class="validate[required]" id="Revocation Date" name="Revocation Date" placeholder="Revocation Date" type="text" /> </span><span style="width:25%; float:left"><strong>Reason</strong><br />
<input class="validate[required]" id="Revocation Reason" name="Revocation Reason" placeholder="Revocation Reason" type="text" /> </span>
</div>
</div>
<div id="Transfer" style="display:none; margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong> <br />
<input class="validate[required]" id="Transfer Date" name="Transfer Date" placeholder="Transfer Date" type="text" /> </span><span style="width:25%; float:left"><strong>To</strong><br />
<input class="validate[required]" id="Transfer to" name="Transfer to" placeholder="Transfer to" type="text" /> </span>
</div>
</div>
<div style="clear:both"> </div>
<div id="#Active_Status_Change" style="display:inline; margin-bottom:15px;"><b>Active Status Change</b>
<input class="validate[required]" id="Active_Status_Change" name="Active_Status_Change" type="radio" value="Location" />Location
<input name="Active_Status_Change" type="radio" value="Level of Care" />Level of Care
<input name="Active_Status_Change" type="radio" value="Diagnosis" />Diagnosis</div>
<div id="Location" style="display:none; margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>From</strong> <br />
<input class="validate[required]" id="Date of Death" name="Date of Death" placeholder="Date of Death" type="text" /> </span> <span style="width:25%; float:left"><strong>To</strong><br />
<input class="validate[required]" id="Time of Death" name="Time of Death" placeholder="Time of Death" type="text" /> </span>
</div>
</div>
<div id="Level_of_Care" style="display:none; margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>From</strong> <br />
<input class="validate[required]" id="Discharge Date" name="Discharge Date" placeholder="Discharge Date" type="text" /> </span> <span style="width:25%; float:left"><strong>To</strong> <br />
<input class="validate[required]" id="Discharge Reason" name="Discharge Reason" placeholder="Discharge Reason" type="text" /> </span><span style="width:25%; float:left"><strong>Did Location Change</strong> <br />
<input class="validate[required]" id="Discharge Reason2" name="Discharge Reason2" placeholder="Discharge Reason" type="text" /> </span>
</div>
</div>
<div id="Diagnosis" style="display:none; margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>From</strong> <br />
<input class="validate[required]" id="Revocation Date" name="Revocation Date" placeholder="Revocation Date" type="text" /> </span><span style="width:25%; float:left"><strong>To</strong><br />
<input class="validate[required]" id="Revocation Reason" name="Revocation Reason" placeholder="Revocation Reason" type="text" /> </span>
</div>
</div>
<div style="clear:both"> </div>View on JSFiddle
第二部分（Termination_Type 和 Active_Status_Change）我的工作就像一个魅力。我的问题是，只有当您选择第一组选项 (Type_of_Change) 时，我似乎无法显示第二组选项。
现在我只想在您选择其中一个时显示 Termination_Type 或 Active_Status_Change 选项。
我做错了什么？
【问题讨论】：
所以您只想在用户选择了第一组中的一个选项时才显示第二组？ 【参考方案1】：我发现了一些问题：
-
某些元素 ID 重复。 ID 应该是唯一的，并且不能在文档中多次使用。另外，我删除了一些 ID，因为它们不是必需的或未使用的。
某些 ID 以“#”为前缀。这可能是无意的。
虽然是technically allowed，但我建议不要在输入名称中使用空格。在我看来，这会使事情变得不一致，并留下更多的错误空间。
“文档就绪”功能不包括一些 javascript 代码。
我已经嵌套了每个部分的子元素，以便子元素与它们的父部分一起显示/隐藏。
我使用通用类“default_hidden”隐藏了 CSS 的初始部分。
顺便说一句，您可以通过使用通用类和可重用结构而不是特定 ID 来简化代码并使其更加DRY。例如，您可以使用 jQuery 以更动态的方式切换嵌套结构。这也将使将来扩展您的表单变得更加容易，而不必为每个新表单块添加更多的 jQuery 代码。
jQuery(document).ready(function($)
// bind event handler to the checkbox
$('input[name="Payer Type"]').change(function()
// get input element where name attribute is starts with the checkbox value
// and then toggle the visibility based on the checked property
$('input[name^="' + this.value + '"]').toggle(this.checked);
// trigger the change event
).change();
$("[name=Type_of_Change]").change(function()
$("#Termination_Type").toggle($("[name=Type_of_Change]").index(this) === 0);
$("#Active_Status_Change").toggle($("[name=Type_of_Change]").index(this) === 1);
);
$("[name=Termination_Type]").change(function()
$("#Death").toggle($("[name=Termination_Type]").index(this) === 0);
$("#Discharge").toggle($("[name=Termination_Type]").index(this) === 1);
$("#Revocation").toggle($("[name=Termination_Type]").index(this) === 2);
$("#Transfer").toggle($("[name=Termination_Type]").index(this) === 3);
);
$("[name=Active_Status_Change]").change(function()
$("#Location").toggle($("[name=Active_Status_Change]").index(this) === 0);
$("#Level_of_Care").toggle($("[name=Active_Status_Change]").index(this) === 1);
$("#Diagnosis").toggle($("[name=Active_Status_Change]").index(this) === 2);
);
);.default_hidden
display: none;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Type_of_Change"><strong>Type of Change</strong>
<input class="validate[required]" name="Type_of_Change" type="radio" value="Termination" />Termination
<input name="Type_of_Change" type="radio" value="Active Status Change" />Active Status Change </div>
<div style="clear:both"> </div>
<div id="Termination_Type" class="default_hidden" style="margin-bottom:15px;"><b>Termination</b>
<input class="validate[required]" name="Termination_Type" type="radio" value="Death" />Death
<input name="Termination_Type" type="radio" value="Discharge" />Discharge
<input name="Termination_Type" type="radio" value="Revocation" />Revocation
<input name="Termination_Type" type="radio" value="Transfer" />Transfer
<div id="Death" class="default_hidden" style="margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong> <br />
<input class="validate[required]" name="Date_of_Death" placeholder="Date of Death" type="text" /> </span> <span style="width:25%; float:left"><strong>Time</strong><br />
<input class="validate[required]" name="Time_of_Death" placeholder="Time of Death" type="text" /> </span>
</div>
</div>
<div id="Discharge" class="default_hidden" style="margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong> <br />
<input class="validate[required]" name="Discharge_Date" placeholder="Discharge Date" type="text" /> </span> <span style="width:25%; float:left"><strong>Reason</strong> <br />
<input class="validate[required]" name="Discharge_Reason" placeholder="Discharge Reason" type="text" /> </span>
</div>
</div>
<div id="Revocation" class="default_hidden" style="margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong> <br />
<input class="validate[required]" name="Revocation_Date" placeholder="Revocation Date" type="text" /> </span><span style="width:25%; float:left"><strong>Reason</strong><br />
<input class="validate[required]" name="Revocation_Reason" placeholder="Revocation Reason" type="text" /> </span>
</div>
</div>
<div id="Transfer" class="default_hidden" style="margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong> <br />
<input class="validate[required]" name="Transfer_Date" placeholder="Transfer Date" type="text" /> </span><span style="width:25%; float:left"><strong>To</strong><br />
<input class="validate[required]" name="Transfer_to" placeholder="Transfer to" type="text" /> </span>
</div>
</div>
<div style="clear:both"> </div>
</div>
<div id="Active_Status_Change" class="default_hidden" style="margin-bottom:15px;"><b>Active Status Change</b>
<input class="validate[required]" name="Active_Status_Change" type="radio" value="Location" />Location
<input name="Active_Status_Change" type="radio" value="Level of Care" />Level of Care
<input name="Active_Status_Change" type="radio" value="Diagnosis" />Diagnosis
<div id="Location" class="default_hidden" style="margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>From</strong> <br />
<input class="validate[required]" name="Date_of_Death" placeholder="Date of Death" type="text" /> </span> <span style="width:25%; float:left"><strong>To</strong><br />
<input class="validate[required]" name="Time_of_Death" placeholder="Time of Death" type="text" /> </span>
</div>
</div>
<div id="Level_of_Care" class="default_hidden" style="margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>From</strong> <br />
<input class="validate[required]" name="Discharge_Date" placeholder="Discharge Date" type="text" /> </span> <span style="width:25%; float:left"><strong>To</strong> <br />
<input class="validate[required]" name="Discharge_Reason" placeholder="Discharge Reason" type="text" /> </span><span style="width:25%; float:left"><strong>Did Location Change</strong> <br />
<input class="validate[required]"name="Discharge_Reason2" placeholder="Discharge Reason" type="text" /> </span>
</div>
</div>
<div id="Diagnosis" class="default_hidden" style="margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>From</strong> <br />
<input class="validate[required]" name="Revocation_Date" placeholder="Revocation Date" type="text" /> </span><span style="width:25%; float:left"><strong>To</strong><br />
<input class="validate[required]" name="Revocation_Reason" placeholder="Revocation Reason" type="text" /> </span>
</div>
</div>
<div style="clear:both"> </div>
</div>【讨论】：
以上是关于嵌套我的表单 - 带有单选按钮的 JavaScript 条件的主要内容，如果未能解决你的问题，请参考以下文章