Question

我有这个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>

我需要根据标记的复选框/ es创建一些input。例如，如果我标记第一个＆＃39;尺寸＆＃39;我应该得到这个：

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

如果我标记第二个＆＃39;颜色＆＃39;我应该得到这个：

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

如果我同时标记＆＃39;尺寸＆＃39; ＆安培; ＆＃39;色＆＃39;我应该得到这个：

<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>

我该怎么做？

更新1

我试图通过这样做来检查哪个复选框：

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

但它不能正常工作

更新2

我意识到另一个问题，我如何检查复选框何时被检查，并在触发一些代码后不知道复选框的任何数据？我有一个代码可以动态生成复选框，因此我永远不会知道他们的姓名或身份或任何其他数据。我创建的模板如下所示：

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

例如名称可以采取＆＃34;颜色＆＃34;在那种情况下，id将是＆＃34; color_choice＆＃34;或者名字可以采取＆＃34;尺寸＆＃34;在这种情况下，id将是＆＃34; size_choice＆＃34;，有时会创建一个时间。我需要知道的是，我不知道如何知道检查了哪个复选框以及何时触发某些事件，例如在运行中创建其他输入。我如何处理这部分呢？

Answer 1

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

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

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

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

或者您可以使用jQuery的attr()

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

显示这两种情况的工作示例，以及将事件附加到输入项的任何点击都在这个jsfiddle：

http://jsfiddle.net/k3B73/

Answer 2

<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>

根据复选框选择创建元素

2 个答案: