Javascript 基于复选框选择创建元素

我有这个HTML：

<fieldset style="" title="Variaciones" id="product-create-step-3" class="fstep">
    <legend>Variaciones</legend>
    <section id="choices">    
        <input type="checkbox" value="24" id="24" name="Size"> Size
        <input type="checkbox" value="25" id="25" name="Color"> Color

        <section style="display: none" class="options_holder"></section>
        <section style="display: none" class="variations_holder"></section></section>
</fieldset>

如果我将第二个标记为“颜色”，我将获得：

<section style="display: none" class="options_holder">
    <input name="size[24][]" value="" placeholder="Write your size" />
</section>    

<section style="display: none" class="options_holder">
    <input name="color[25][]" value="" placeholder="Write your color" />
</section>    

<section style="display: none" class="options_holder">
    <input name="size[24][]" value="" placeholder="Write your size" />
    <input name="color[25][]" value="" placeholder="Write your color" />
</section>    

但它不起作用

更新2

我意识到另一个问题，我如何检查复选框何时被选中，以及在不知道复选框的任何数据的情况下触发一些代码？我有一个代码可以动态生成复选框，这样我就永远不会知道它们的名字、id或任何其他数据。我的创建模板如下所示：

<input type="checkbox" name="{{ entity.getLabel|lower }}" id="{{ entity.getLabel|lower ~ "_choice" }}" value="{{ entity.getId }}" /> {{ entity.getLabel }}

{{entity.getLabel}

例如，如果名称可以采用“颜色”，在这种情况下，id将是“颜色选择”，或者名称可以采用“大小”，在这种情况下，id将是“大小选择”，有时会在创建两者时创建一个。我需要知道但不需要知道的是，如何知道选中了哪个复选框，以及何时触发某些事件，例如，动态创建一些其他输入。我该如何处理这个部分呢？

<fieldset style="" title="Variaciones" id="product-create-step-3" class="fstep">
    <legend>Variaciones</legend>
    <section>    
        <input type="checkbox" value="24" id="24" name="Size" id='size_choice'> Size
        <input type="checkbox" value="25" id="25" name="Color" id='color_choice'> Color

        <section style="display: none" class="options_holder" id='options_holder'></section>   
        <section style="display: none" class="variations_holder"></section>
    </section>
</fieldset>

<script type="text/javascript">
    $(document).ready(function(){
        $('#size_choice').click(function(){
            if ($(this).is(':checked'))
                $("#options_holder").append('<input name="size[24][]" value="" placeholder="Write your size" id="size" />');
            else
                $("#size").destroy();
        });

        $('#color_choice').click(function(){
            if ($(this).is(':checked'))
                $("#options_holder").append('<input name="color[25][]" value="" placeholder="Write your color" id="choice" />');
            else
                $("#color").destroy();
        });
    })
</script>

变异素
大小
颜色
$（文档）.ready（函数（）{
$（“#大小_选项”）。单击（函数（）{
如果（$（this）.is（':checked'））
$（“期权持有人”）。附加（“”）；
其他的
$（“#大小”）.destroy（）；
});
$（“#颜色选择”）。单击（函数（）{
如果（$（this）.is（':checked'））
$（“期权持有人”）。附加（“”）；
其他的
$（“#颜色”）.destroy（）；
});
})

因此，如果将选择器更改为包含使用伪选择器的元素，则javascript应该可以工作：

$("#choices input:checked").each(function() {
    console.log(this.id + "was checked");
});

至于访问属性值，您可以使用正在使用的本机javascript对象，即：

 console.log("value is " + this.value);

或者您可以使用jQuery的

显示这两种情况以及将事件附加到任何输入项点击的工作示例如下：

---

如果不创建字段，而是始终将字段放在那里，并根据需要隐藏或显示（以及启用/禁用）可能会更容易。非常简单-查找jQuery

append（）

方法。听一听检查，然后根据需要将标记附加到

$（'.options_holder'）

@Pointy感谢您的建议，但不是，因为我将允许添加更多输入，就像前面提到的“添加大小，添加”一样color@Reynier显示/隐藏仍然更容易。取消选中复选框时会发生什么情况？它必须马上消失？@RobSchmuecker问题不在于

append（）

我还可以使用

html（）

替换一段内容，或者可能是

after（）

或其他什么，问题在于如何获得所有标记的复选框，以便正确构建元素

 console.log("value is " + this.value);

 console.log("name is " + $(this).attr('name'))