Getting values on changing group checkboxes to an array

Question

I am working on this demo.
Why am I not able to get the checkbox values on checking and unchecking the checkboxes?

// find elements
$('input:checkbox[name=product]').on('change', function() {
    var val = '';
    $('input:checkbox[name=product]:checked').each(function() {
        val += $(this).val();
    });
    switch (val) {
        case 'all':
             console.log(val);
            break;
        case 'women':
             console.log(val);
            break;
        case 'men':
             console.log(val);
            break;
   case 'men':
             console.log(val);
            break;
       }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="product" value="all" checked />All Genders <br />
<input type="checkbox" name="product" value="women" />Women <br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />

What logic are you trying to create? I'm sure it can be done in a much less verbose manner. — Rory McCrossan, May 28 '18 at 17:17
trying to update a list of selected checkboxed in an array by updating the states of checkbox — Mona Coder, May 28 '18 at 17:18
In which case just build the entire array whenever one box is changed, like this: https://stackoverflow.com/questions/19766044/best-way-to-get-all-selected-checkboxes-values-in-jquery/19766067#19766067. Also note that you aren't using arrays at all in the code snippet you've shown. — Rory McCrossan, May 28 '18 at 17:19

score 1 · Accepted Answer · answered May 28 '18 at 17:20

switch condition should come inside each loop.

// find elements
$('input:checkbox[name=product]').on('change', function() {
    var valueArray = [];
    $('input:checkbox[name=product]:checked').each(function() {
        var val = $(this).val();
        valueArray.push(val);

        switch (val) {
            case 'all':
                console.log(val);
                break;
            case 'women':
                console.log(val);
                break;
            case 'men':
                console.log(val);
                break;
            case 'men':
                console.log(val);
                break;
        }
    });
    console.log("final checked box array");
    console.log(valueArray);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="product" value="all" checked />All Genders <br />
<input type="checkbox" name="product" value="women" />Women <br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />

That's just about the most useless `switch` statement I've ever seen... — Rory McCrossan, May 28 '18 at 17:43
@RoryMcCrossan Right If he just do` console.log` with this otherwise It is fine If he have something more to do with different cases. — Nishant Dixit, May 28 '18 at 17:56

score 0 · Answer 2 · answered May 28 '18 at 17:23

You just need to console log the checked values, no need of any switch case there.

// find elements
$('input:checkbox[name=product]').on('change', function() {
    var val = '';

    $('input:checkbox[name=product]:checked').each(function() {
        val = $(this).val();
        console.log(val)
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="product" value="all" checked />All Genders <br />
<input type="checkbox" name="product" value="women" />Women <br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />

Getting values on changing group checkboxes to an array

2 Answers2