嵌套我的表单 - 带有单选按钮的JavaScript条件

时间：2016-12-29 16:58:27

标签： jquery forms radio-button

我有一个这样的表单：选择2个选项中的一个，它应该根据第一个选择显示不同的选项集。这些选项中的每一个都会在选择时询问更多信息。这是脚本：

＆＃13;
＆＃13; 
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);
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

View on JSFiddle

第二部分（Termination_Type和Active_Status_Change）我的工作就像一个魅力。我的问题是，只有当您选择第一组（Type_of_Change）时，我似乎无法显示第二组选项。

现在我只想选择一个或另一个来显示Termination_Type或Active_Status_Change的选项。

我做错了什么？

1 个答案:

答案 0 :(得分：0)

我看到一些问题：

  1. 重复一些元素ID。 ID应该是唯一的，并且永远不会在文档中使用过多次。此外，我删除了一些ID，因为它们没有必要或未使用。
  2. 有些ID以“＃”为前缀。这可能是无意的。
  3. 虽然它是technically allowed，但我建议不要在输入名称中使用空格。在我看来，它使事情不一致，并留下更多的错误空间。
  4. “文档就绪”功能排除了部分JavaScript代码。
  5. 我已嵌套每个部分的子元素，以便子部分显示/隐藏其父部分。
  6. 我通过使用公共类“default_hidden”来隐藏CSS的初始部分。

    7. 顺便提一下，您可以通过使用公共类和可重用结构而不是特定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>&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>

相关问题
最新问题