jQuery Dynamically Generated Checkboxes/Checking One Checkbox At A Time

Question

I'm trying to write a jQuery script that's as follows:

User makes a selection from a dropdown select box (7, 14, or 28)
This selection generates the same number of checkboxes as chosen from the dropdown select
This selection also shows the number selected in a readonly text input
After the checkboxes are generated, a group of images are then able to check each checkbox one at a time, until all of the checkboxes are checked
These checked checkboxes will need to have the same ID and name as the image that was clicked
If a checked checkbox is unchecked, it disappears

My problems are as follows:

I have to select something twice from the dropdown select before the checkboxes show in the div
I can only check one checkbox with the image, instead of being able to select the next checkbox

This is basically a Create Your Own function for WooCommerce.

Here is the JSFiddle of the code I have 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>

You have a lot of syntax errors in your code - the snippet and the fiddle (open F12 Dev Tools and look at the console). You should try to fix these first and it may help you solve your problem. — Rhumborl
– Rhumborl, Commented Oct 24, 2014 at 15:16
Can you elaborate on #4? What are you referring to when you say "groups of images"? — Leo Bedrosian
– Leo Bedrosian, Commented Oct 24, 2014 at 15:26
@Rhumborl I was working out of the Fiddle, but just now I put the code on the site and Firebug isn't giving me any errors. I'm learning jQuery now so excuse any ignorance of errors. — Chris
– Chris, Commented Oct 24, 2014 at 15:28
@HaigBedrosian You can see at om.hawkhorne.com/products. When you click on Create Your Own, the group of images will show. Those images are going to be used to check the checkboxes on the left. The checkboxes will be styled later after this code gets working. — Chris
– Chris, Commented Oct 24, 2014 at 15:29

Chris · Accepted Answer · 2014-10-26 18:35:53Z

1

Just in case anybody comes across this, I actually found a plugin which suits my needs and which I was able to customize further.

Assorted Bundles WooCoomerce Custom Product Boxes

answered Oct 26, 2014 at 18:35

Chris

1011 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Dynamically Generated Checkboxes/Checking One Checkbox At A Time

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related