Question

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

用户从下拉选择框（7,14或28）中进行选择
此选项会生成与从下拉列表选择
此选项还会显示在只读文本输入中选择的数字
生成复选框后，一组图像可以一次检查一个复选框，直到选中所有复选框
这些选中的复选框需要与所单击的图像具有相同的ID和名称
如果取消选中已选中的复选框，则会消失

我的问题如下：

在div
我只能选中一个带图片的复选框，而不能选择下一个复选框

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

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

jQuery动态生成复选框/一次检查一个复选框

1 个答案: