javascript - jQuery 动态生成的复选框/一次选中一个复选框

Question

我正在尝试编写一个如下所示的 jQuery 脚本:

1. 用户从下拉选择框中进行选择(7、14 或 28)
2. 此选择生成的复选框数量与从下拉选择中选择的数量相同
3. 此选择还显示在只读文本输入中选择的数字
4. 复选框生成后，一组图像可以一次选中每个复选框，直到选中所有复选框
5. 这些选中的复选框需要与被点击的图像具有相同的 ID 和名称
6. 如果取消选中选中的复选框，它就会消失

我的问题如下:

1. 在复选框显示在 div 中之前，我必须从下拉选择中选择两次
2. 我只能选中一个带有图像的复选框，而不能选中下一个复选框

这基本上是为 WooCommerce 创建您自己的功能。

这是我拥有的代码的 JSFiddle http://jsfiddle.net/CHorne28/vyoejok6/1/

var count = 0;

jQuery(".variations_form").change(function () {
    var rate = "";
    if (jQuery('#house-assortment').val() == "house-box-7-13-00") {
        rate = "7";
    } else if (jQuery('#house-assortment').val() == "house-box-14-25-00") {
        rate = "14";
    } else if (jQuery('#house-assortment').val() == "house-box-28-50-00") {
        rate = "28";
    }
    jQuery('#box-amount').val(rate);

function fakeAjax(state) {
    switch (state) {
        case "house-box-7-13-00":
            return ["one", "two", "three", "four", "five", "six", "seven"];
        case "house-box-14-25-00":
            return ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen"];
        case "house-box-28-50-00":
            return ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen", "twenty", "twenty one", "twenty two", "twenty three", "twenty four", "twenty five", "twenty six", "twenty seven", "twenty eight"];
    }
}

var output = $(".cyo-selections");

$('#house-assortment').change(function(){
    var state = this.value;
    if(state !== "") {
        // the following would be part of the ajax callback
        var resultArray;
        output.empty(); // clear the div
        resultArray = fakeAjax(state);
        $.each(resultArray, function () {
            $('<input type="checkbox" id="'+this+'" value="'+this+'">'+this+'</option>').appendTo(output);
        })
    }
});
    
    $("#Almond").click(function () {
        if ($('input[type=checkbox]').is(":unchecked")) {
        $('input[type=checkbox]').prop('checked', 'checked');
            elseif {
                $('input[type=checkbox]').is(":unchecked")
        };
    });

});

.cyo-selections {
    border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Amount:<form class="variations_form">
<select id="house-assortment">
    <option>Select</option>
    <option value="house-box-7-13-00">7</option>
    <option value="house-box-14-25-00">14</option>
    <option value="house-box-28-50-00">28</option>
</select>
</form>

Fill<input type="text" id="box-amount" readonly />

<div class="cyo-selecting" style="display:inline">
<img src="http://om.hawkhorne.com/wp-content/uploads/2014/10/almond1.jpg" id="Almond">
</div>

<div class="cyo-selections">

</div>

Answer 1

以防万一有人遇到这个问题，我实际上找到了一个适合我需要的插件，并且我能够进一步自定义它。

Assorted Bundles WooCoomerce Custom Product Boxes