1. 首頁
  2. 問答
  3. 嵌套我的表單 - 帶有單選按鈕的JavaScript條件

嵌套我的表單 - 帶有單選按鈕的JavaScript條件

2016-12-29 70 views
1

我有一個如下所示的表單：選擇2個選項中的一個，並根據第一個選項顯示不同的選項集。每個選項在選擇時都會要求提供更多信息。這是腳本：嵌套我的表單 - 帶有單選按鈕的JavaScript條件

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>

View on JSFiddle

第二部分（Termination_Type和Active_Status_Change）我已經工作就像一個魅力。我的問題是，只有當您選擇第一個（Type_of_Change）時，我似乎無法顯示第二組選項。

現在我只想顯示Termination_Type或Active_Status_Change的選項，只有當您選擇一個或另一個。

我在做什麼錯？

來源

2016-12-29 Dccreatives

+0

所以你想顯示僅當用戶選擇了第一組的選擇第二套？ –

回答

0

我看到幾個問題：

  1. 一些元素ID重複。 ID應該是唯一的，並且不會在文檔中多次使用。另外，我刪除了一些ID，因爲它們不是必需的或者未被使用。
  2. 某些ID前綴爲「＃」。這可能是無意的。
  3. 雖然它是technically allowed，我建議不要在輸入名稱中使用空格。在我看來，它使事情不一致，並留下更多的錯誤空間。
  4. 「文檔準備好」功能不包括一些JavaScript代碼。
  5. 我嵌套每個部分的子元素，以便潛艇顯示/隱藏其父節。
  6. 通過使用普通類「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>&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>

來源

2016-12-29 19:17:47 showdev

相關問題

 相關問題