[英]HTML Form Toggle Hide/Show fields based on selection
On my form (shown below) I have a set of radio options. 在我的表格(如下所示)上,我有一组收音机选项。 If the user selects the last option for "Other", I want the div to show and slide down where they can enter a custom value in a text box. 如果用户选择“其他”的最后一个选项,则希望div显示并向下滑动,以便他们可以在文本框中输入自定义值。 I also want to be able to have multiple instances of this same process multiple times in the same form (with different IDs obviously). 我还希望能够以相同的形式(显然具有不同的ID)多次具有相同进程的多个实例。
Here's how it's set up: If the user selects the radio button who's class is "color_toggle" and the value equals "Other", I want it to show the element id "specify_color_box". 设置方法如下:如果用户选择类别为“ color_toggle”的单选按钮,并且该值等于“ Other”,我希望它显示元素ID“ specify_color_box”。 If they select a different radio button, I want that same element hidden. 如果他们选择其他单选按钮,则我希望隐藏同一元素。
Here's the answer just in case anyone else has the same issue. 这是万一其他人遇到相同问题的答案。 My form element is shown here: 我的表单元素如下所示:
<fieldset class="w100">
<div class="rowElem align-left">
<input type="radio" id="Gray" name="color" value="Gray" class="color_toggle" checked >
<label>Gray (Standard)</label>
</div>
<div class="rowElem align-left">
<input type="radio" id="All Yellow" name="color" value="All Yellow" class="color_toggle">
<label>All Yellow</label>
</div>
<div class="rowElem align-left">
<input type="radio" id="Yellow Posts Black Panels" name="color" value="Yellow Posts Black Panels" class="color_toggle">
<label>Yellow Posts / Black Panels</label>
</div>
<div class="rowElem align-left">
<input type="radio" id="other_color" name="color" value="Other" class="color_toggle">
<label>Other</label>
</div>
<div id="specify_color_box" class="form-subscr-field rowElem align-left" style="display:none;">
<label for="specify_color" id="specify_color_label">Specify Custom Color: </label>
<input id="specify_color" type="text" name="specify_color" class="inputbox" size="10" value="Enter custom color" onFocus="if(this.value=='Enter custom color') this.value='';" onBlur="if(this.value=='') this.value='Enter custom color';"/>
</div>
</fieldset>
and my jQuery is shown here: 我的jQuery显示在这里:
$(document).ready(function(){
$("input[name='color']").click(function(){
if($(this).val() == "Other") {
$("#specify_color_box").slideDown("fast");
}
else{
$("#specify_color_box").slideUp("fast");
}
});
});
You can check for the checked state of your radio button like this: 您可以像这样检查单选按钮的选中状态:
$('#Other').is(':checked')
This way, you don't even have to rely on the value of the radio button - which you could decide to change for whatever reason - just its state. 这样,您甚至不必依赖单选按钮的值-您可以出于任何原因决定更改它-只需更改其状态即可。
Note: if your element has an ID, use it to select it, it's the fastest method. 注意:如果您的元素具有ID,请使用它进行选择,这是最快的方法。 The more complex the selector, the slower the selection ! 选择器越复杂,选择速度就越慢!
Applied to your code, it gives the following (inverting the slideUp/slideDown to match the condition correctly): 应用于您的代码,它给出以下内容(反转slideUp / slideDown以正确匹配条件):
$(document).ready(function() {
$("#specify_color_box").css("display", "none");
$(".color_toggle").click(function() {
if ($('#other_color').is(':checked')) {
$("#specify_color_box").slideDown("fast");
} else {
$("#specify_color_box").slideUp("fast");
}
});
});
Here's the answer just in case anyone else has the same issue. 这是万一其他人遇到相同问题的答案。 My form element is shown here: 我的表单元素如下所示:
<fieldset class="w100">
<div class="rowElem align-left">
<input type="radio" id="Gray" name="color" value="Gray" class="color_toggle" checked >
<label>Gray (Standard)</label>
</div>
<div class="rowElem align-left">
<input type="radio" id="All Yellow" name="color" value="All Yellow" class="color_toggle">
<label>All Yellow</label>
</div>
<div class="rowElem align-left">
<input type="radio" id="Yellow Posts Black Panels" name="color" value="Yellow Posts Black Panels" class="color_toggle">
<label>Yellow Posts / Black Panels</label>
</div>
<div class="rowElem align-left">
<input type="radio" id="other_color" name="color" value="Other" class="color_toggle">
<label>Other</label>
</div>
<div id="specify_color_box" class="form-subscr-field rowElem align-left" style="display:none;">
<label for="specify_color" id="specify_color_label">Specify Custom Color: </label>
<input id="specify_color" type="text" name="specify_color" class="inputbox" size="10" value="Enter custom color" onFocus="if(this.value=='Enter custom color') this.value='';" onBlur="if(this.value=='') this.value='Enter custom color';"/>
</div>
</fieldset>
and my jQuery is shown here: 我的jQuery显示在这里:
$(document).ready(function(){
$("input[name='color']").click(function(){
if($(this).val() == "Other") {
$("#specify_color_box").slideDown("fast");
}
else{
$("#specify_color_box").slideUp("fast");
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.