Javascript 在附加内容内的复选框上显示/隐藏选择字段_Javascript_Jquery_Dom

Javascript 在附加内容内的复选框上显示/隐藏选择字段

javascript jquery dom

Javascript 在附加内容内的复选框上显示/隐藏选择字段,javascript,jquery,dom,Javascript,Jquery,Dom,我的问题如下：我有一个动态div框，在其中我附加了一些输入字段，包括一个样式化的复选框和一个隐藏的选择字段。仅当用户选中旁边的复选框时，才应显示“选择”字段。因此，当您需要多个div框（其中包含复选框和隐藏的选择字段）时，请单击“[+]”，并进行输入。我已经尝试了一些可能的解决办法，但似乎没有一个奏效。当前状态是，我可以添加这些包含输入字段的div，但只有“静态”div可以使用函数show/hide The select field onclick复选框。附加的字段始终显示“选择”字段。代码如下

我的问题如下：我有一个动态div框，在其中我附加了一些输入字段，包括一个样式化的复选框和一个隐藏的选择字段。仅当用户选中旁边的复选框时，才应显示“选择”字段。因此，当您需要多个div框（其中包含复选框和隐藏的选择字段）时，请单击“[+]”，并进行输入。我已经尝试了一些可能的解决办法，但似乎没有一个奏效。当前状态是，我可以添加这些包含输入字段的div，但只有“静态”div可以使用函数show/hide The select field 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">&nbsp;</th></tr><tr><th colspan="2"><hr class="white-hr" /></th></tr><tr><th colspan="2">&nbsp;</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">[&ndash;]</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>

//JAVASCRIPT
$（文档）.ready（函数（）{
//动态RD添加
//轮
//允许的最大DIV框数
变量rd_max_字段=15；
//字段包装器
var rd_wrapper=$（“.rd_输入_字段_wrapp”）；
//添加DIV按钮ID
var rd_add_button=$（“.rd_add_field_button”）；
//初始DIV盒计数
var rd_x=1；//初始文本框计数
//添加DIV容器
$（rd_添加按钮）。单击（功能（e）{
e、 预防默认值（）；
//允许的最大DIV
if（rd_x
贝泽希农*
比特·奥斯瓦伦”；
全科医生
可湿性粉剂
服务提供商
普吕芬斯努默*
索尔泽特*
Zwischenzeit？
泽顿
1.
2.
3.

这是小提琴的调子：

注意： 单击此处时，选择字段似乎没有.hide（）；在我的页面上，它可以与.show（）和.hide（）配合使用

编辑

问题：如何将另一组输入字段的动态添加与显示/隐藏onclick复选框（checkswitch）结合起来？目前只有“静态”复选框起作用（单击checkswitch，选择字段出现（单击时应再次消失））。

据我所知，此构建将帮助您

建议：不要在生成的html代码中使用静态

id

-s

编辑：尝试此操作

”，但只有“静态”选项可以使用“显示/隐藏选择字段onclick复选框”功能。附加的部分总是显示选择字段“你能解释更多细节吗？我只希望附加的部分（超过[+]）像已经存在的div一样工作。哦，你只想复制它？完全正确！如果你添加另一组，完全相同的“过程”应该出现：你输入，如果你想要“zwischenzeit”，则选中该框并进行选择。这就是我的新版本。切换部分只是一个次要问题。问题是，如果我添加另一组此输入字段，则选择选项仍然需要隐藏，直到您单击checkbutton（checkswitch）为止。但我实现了切换功能：）这正是我想要的，但必须先选中复选框，然后出现选择字段。另一种方法是：取消选中，选择字段已经取消选中，添加css，就这样了。zz{display:none；}Wohoo！非常感谢我的朋友！它的工作原理完全符合我的预期！格鲁吉亚的问候）