-3

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

我需要input根据标记的复选框/es 创建一些。例如，如果我标记第一个“大小”，我应该得到这个：

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

我会怎么做？

更新 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 }}

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

4

2 回答 2

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/

于 2013-09-11T21:58:36.417 回答
0 
<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>
于 2013-09-11T14:58:32.310 回答