显示/隐藏在附加内容中的复选框上选择字段
问题描述：
我的问题如下：我有动态div盒，其中我添加了一些输入字段，包括样式复选框和隐藏选择字段。只有当用户选中旁边的框时，才会出现选择字段。所以当你需要多个div盒（复选框和隐藏的选择域）并点击你的输入时，你点击“[+]”。我已经尝试了一些可能的解决方案，但没有一个似乎可行。目前的状态是，我可以添加这些包含输入字段的div，但只有“静态”一个与该功能一起使用显示/隐藏选择字段onclick复选框。附加的总是显示选择字段。下面的代码：显示/隐藏在附加内容中的复选框上选择字段
// JAVASCRIPT
$(document).ready(function() {
// DYNAMIC RD ADD
// ROUNDS
// MAXIMUM DIV BOXES ALLOWED
var rd_max_fields = 15;
// FIELDS WRAPPER
var rd_wrapper = $(".rd_input_fields_wrap");
// ADD DIV BUTTON ID
var rd_add_button = $(".rd_add_field_button");
// INITIAL DIV BOX COUNT
var rd_x = 1; //initlal text box count
// ADD DIV CONTAINER
$(rd_add_button).click(function(e){
e.preventDefault();
// MAX DIV ALLOWED
if(rd_x < rd_max_fields){
// DIV BOX INCREMENT
rd_x++;
// ADD INPUT TEXT
$(rd_wrapper).append('<div><table id="addrd" width="385px" "cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;"><tr><th colspan="2"> </th></tr><tr><th colspan="2"><hr class="white-hr" /></th></tr><tr><th colspan="2"> </th></tr></table><a href="#" class="rd_remove_field"><table id="addrd" width="385px" "cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;"><tr><th align="left">Prüfung entfernen</th><th align="right"><font color="#FFD700">[–]</font></th></tr></table></a><tr><th colspan="2"><hr /></th></tr></table><table width="385px" "cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;"><tr><td align="left">Prüfungsnummer<font color="#8E6516">*</font></td><td align="right"><input name="rd_id[]" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="' + rd_x + '" required="required" /></td></tr><tr><td align="left">Sollzeit<font color="#8E6516">*</font></td><td align="right"><input name="rd_id[]" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Bsp. ' + Math.floor((Math.random() * 7) + 1) + ':' + Math.floor((Math.random() * 49) + 10) + '" required="required" /></td></tr><tr><td align="left">Zwischenzeit?</td><td align="right"><table width="135px" cellspacing="0" style="border: 0;"><tr><td align="left"><div class="checkboxOne"><input type="checkbox" value="yes" id="checkboxOneInput_' + rd_x + '" name="rd_id[]"/><label for="checkboxOneInput_' + rd_x + '"></label></div></td><td align="right"><select name="rd_id[]" id="rd_id_zz" class="zz" placeholder="Anzahl" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 75px;" ><option selected="selected" disabled="disabled">Zeiten</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td></tr></table></td></tr></tr></table></div>');
}
});
// USER CLICK TO REMOVE DIV
$(rd_wrapper).on("click",".rd_remove_field", function(e){
e.preventDefault(); $(this).parent('div').remove();
rd_x--;
});
// STATIC CHECKBOX
$("#rd_id_zz").hide();
$("#checkboxOneInput").click(function() {
if($(this).is(":checked")) {
$("#rd_id_zz").prop('disabled', false);
$("#rd_id_zz").show(500, 'easeInSine');
} else {
$("#rd_id_zz").hide(500, 'easeOutSine');
}
});
});
// HTML
<div class="rd_input_fields_wrap" id="rd_input_fields_wrap">
<table width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; border-bottom: 0;">
<tr>
<th align="left">Prüfung(en) hinzufügen</th>
<th align="right"><a href="#" class="rd_add_field_button" id="add_field"><font color="#FFD700">[+]</font></a></th>
</tr>
<tr>
<th colspan="2"><hr /></th>
</tr>
</table>
<div>
<table id="addrd" width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;">
<tr>
<td align="left">Bezeichnung<font color="#8E6516">*</font></td>
<td align="right">
<select name="rd_type" id="rd_type" class="input-block-level" placeholder="Bitte auswählen" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" required="required" onclick="disable();" >
<option selected='selected' disabled='disabled'>Bitte auswählen</option>";
<option value='GP'>GP</option>
<option value='WP'>WP</option>
<option value='SP'>SP</option>
</select>
</td>
</tr>
<tr>
<td align="left">Prüfungsnummer<font color="#8E6516">*</font></td>
<td align="right"><input id="rd_id_pn" name="rd_id[]" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Bsp. 1" required="required" /></td>
</tr>
<tr>
<td align="left">Sollzeit<font color="#8E6516">*</font></td>
<td align="right"><input id="rd_id_sz" name="rd_id[]" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Bsp. 2:30" required="required" /></td>
</tr>
<tr>
<td align="left">Zwischenzeit?</td>
<td align="right">
<table width="135px" cellspacing="0" style="border: 0;">
<tr>
<td align="left">
<div class="checkboxOne">
<input type="checkbox" value="yes" id="checkboxOneInput" name="rd_id[]"/>
<label for="checkboxOneInput"></label>
</div>
</td>
<td align="right">
<select name="rd_id[]" id="rd_id_zz" class="zz" placeholder="Anzahl" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 75px;" >
<option selected='selected' disabled='disabled'>Zeiten</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
而这里的拨弄*它：
Show/Hide Select Field on Checkbox within Appended-Content
注： 选择栏一点儿也不似乎.hide（）上点击那里。我的网页上它正常工作与.show（）和.hide（）
编辑 问：我如何可以结合动态与节目加入另一组输入字段的/隐藏的onclick复选框（checkswitch） ？此时只有“静态”工作（您单击检查开关并且出现选择字段（并且在您单击时应该再次消失））。
“，但只有“静态”一个与功能显示/隐藏选择域onclick复选框。附加的总是显示选择域“ 你能解释更多的细节？ – Devsullo
我只希望附加的（[+]）像div一样工作，它已经在那里了。 – montreal
哦，你只想复制它？ – Devsullo