CODEWITHSUNDEEP
javascriptjqueryarrayscheckbox
ectype
ectype

Reputation: 15085

Checkboxes that push their value in an empty array but pop or shift the value when unchecked in jQuery

So I have a list of checkboxes in which I push their value to an array which is limited to only 3 selections. These selections get displayed in divs on the page. The push part works fine.. The issue I'm having is when I deselect or uncheck the boxes, I want the values popped or removed from the array which in turn removes or detaches them from the view.

/* checkboxes */
    selections = new Array();   
    $("input[type='checkbox']").change(function () {
        var maxAllowed = 3;
        var cnt = $("input[type='checkbox']:checked").length;  
        var checkIt = $("input[type='checkbox']");
        var chkboxVal = $(this).val();

        //reset selections counter
        if (cnt <= maxAllowed) {
          $('.selCount .counter').html(selReset-cnt);
          selections.push(chkboxVal);
        } else if (cnt > maxAllowed) {
          $(this).prop("checked", "");
          $(this).unbind("click");
          $(this).css("cursor","default");
        }

        var Item1 = selections[0];
        var Item2 = selections[1];
        var Item3 = selections[2];

        var bindedChoice1 = $('<div class="sel1">'+Item1+'</div>');
        var bindedChoice2 = $('<div class="sel2">'+Item2+'</div>');
        var bindedChoice3 = $('<div class="sel3">'+Item3+'</div>');

        //Index of check

        if (cnt == 1) {
           $(".catSelBar").append(bindedChoice1);
           console.log(selections);
        }

        if (cnt == 2) {
           $(".catSelBar").append(bindedChoice2);
           console.log(selections);
        }

        if (cnt == 3) {
           $(".catSelBar").append(bindedChoice3);
           console.log(selections);
        } 


    if(!$(this).prop("checked") && cnt == 1 && $('.catSelBar div').hasClass("sel1")) {
            $(".sel1").detach();
            selections.pop();
           console.log(selections);
        }

        if(!$(this).prop("checked") && cnt == 1 && $('.catSelBar div').hasClass("sel2")){
            $(".sel2").detach();
           selections.pop();
           console.log(selections);
        }
        if(!$(this).prop("checked") && cnt == 2 && $('.catSelBar div').hasClass("sel3")) {
            $(".sel3").detach();
           selections.pop();
           console.log(selections);
        }


    }); //checkbox change function

Upvotes: 2

Views: 1343

Answers (1)

sejordan
sejordan

Reputation: 321

When I've done stuff like this in the past, sometimes I'll just rebuild the selections array.

Here is some sample code:

$(function() {
    var selections = [],
        render_selections = function() {
            $('#selections').html(selections.join(', '));
        };
    $('input[type="checkbox"]').change(function() {
        selections = $.map($('input[type="checkbox"]:checked'), function(a) { return a.value; })
        render_selections();
    });
});

and here is a sample fiddle: http://jsfiddle.net/v4w25pe5/

Upvotes: 1

Related Questions