用无线电按钮嵌套我的表格 - JavaScript条件 - Nesting my form - JavaScript conditions with radio buttons 小贝子编程网

我的表单是这样的：选择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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input class="validate[required]" name="Type of Change" type="radio" value="Termination" id="Type_of_Change" />Termination&nbsp; &nbsp; &nbsp;
  <input name="Type of Change" type="radio" value="Active Status Change" id="Type_of_Change" />Active Status Change&nbsp;</div>
<div style="clear:both">&nbsp;</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 &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Termination_Type" type="radio" value="Discharge" />Discharge &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Termination_Type" type="radio" value="Revocation" />Revocation &nbsp; &nbsp; &nbsp;&nbsp;
  <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>&nbsp; &nbsp;&nbsp;<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>&nbsp; &nbsp;&nbsp;<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> &nbsp;&nbsp;<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>&nbsp; &nbsp;&nbsp;<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>&nbsp; &nbsp;&nbsp;<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">&nbsp;</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 &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Active_Status_Change" type="radio" value="Level of Care" />Level of Care &nbsp; &nbsp; &nbsp;&nbsp;
  <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>&nbsp; &nbsp;&nbsp;<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>&nbsp; &nbsp;&nbsp;<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> &nbsp;&nbsp;<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> &nbsp;&nbsp;<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>&nbsp;&nbsp;<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">&nbsp;</div>

在JSFIDDLE上查看

第二部分（termination_type和active_status_change）我像魅力一样工作。我的问题是，仅当您选择第一个（type_of_change）时，我似乎才能显示第二组选项。

现在，我想仅在选择一个或另一个时才显示termination_type或active_status_change的选项。

我在做什么错？

我看到了一些问题：

重复一些元素ID。ID应该是唯一的，并且在文档中永远不会使用一次。另外，我删除了一些ID，因为它们没有必要或未使用。
一些ID带有"＃"前缀。这可能是无意的。
虽然在技术上允许它，但我建议不要在输入名称中使用空格。我认为，它使事情变得不一致并留下更多的错误空间。
"文档准备就绪"功能不包括一些JavaScript代码。
我已经嵌套了每个部分的子元素，以便subs显示/隐藏其父节。
我使用通用类" default_hidden"。

顺便说一句，您可以通过使用常见的类和可重复使用的结构而不是特定的ID来简化代码并使其更干燥。例如，您可以使用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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input class="validate[required]" name="Type_of_Change" type="radio" value="Termination" />Termination&nbsp; &nbsp; &nbsp;
  <input name="Type_of_Change" type="radio" value="Active Status Change" />Active Status Change&nbsp;</div>
<div style="clear:both">&nbsp;</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 &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Termination_Type" type="radio" value="Discharge" />Discharge &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Termination_Type" type="radio" value="Revocation" />Revocation &nbsp; &nbsp; &nbsp;&nbsp;
  <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>&nbsp; &nbsp;&nbsp;<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>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" name="Discharge_Date" placeholder="Discharge Date" type="text" /> </span>  <span style="width:25%; float:left"><strong>Reason</strong> &nbsp;&nbsp;<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>&nbsp; &nbsp;&nbsp;<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>&nbsp; &nbsp;&nbsp;<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">&nbsp;</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 &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Active_Status_Change" type="radio" value="Level of Care" />Level of Care &nbsp; &nbsp; &nbsp;&nbsp;
  <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>&nbsp; &nbsp;&nbsp;<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>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" name="Discharge_Date" placeholder="Discharge Date" type="text" /> </span>  <span style="width:25%; float:left"><strong>To</strong> &nbsp;&nbsp;<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> &nbsp;&nbsp;<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>&nbsp;&nbsp;<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">&nbsp;</div>
</div>

用无线电按钮嵌套我的表格 - JavaScript条件

相关内容

最新更新

热门标签：