Count checked checkboxes in each function

JavaScript
1

I have the code below, and I’m trying to work out how to use count to see if the number of checked checkboxes is more than 1, if so show green tick, if not don’t show, but I cant work out how to count those values.

As you see it below is where I’ve given up trying everything else, and left it at that point to show.

    $card.find('.moduleElement input[type=checkbox]:checked').each(function () {

        if ($(this)) {
            console.log("1");
            $card.find('.greenTick').css({ "display": "inline" });
        } else {
            console.log("2");
            $card.find('.greenTick').css({ "display": "none" });
        }
    });

Once I get that working I then have a further condition to allow the greenTick to show, inside each .moduleElement there a further div with class moduleFrequencyPanel that has two dropdowns and they both also need to have values that are not empty.

There up to 16 .moduleElement div;s so the each function is looping through each one checking to see if the one checkbox in there is checked and both dropdowns have positive values.

For example:

<div class="moduleElement">
<div><input type="checkbox" /></div>
<div class="moduleFrequencyPanel">
    <select class="moduleFrequencyDropdown">
        <option></option>
    </select>
    <select class="moduleStartMonthDropdown">
    <select>
        <option></option>
    <select>
</div>
</div>

I’ve been on this for ages and simply cant get the whole process to work, as my logic is wrong, could really do with an answer if someone can help.

Thanks in advance

2

You can just check that the length of the jQuery object given to you by the find method, is greater than 2.

3

Hi Paul,

Ye that’s exactly what I’m trying to do and need, but couldn’t get the full logic to work using find etc, so that in each .ModuleElement class if there a checked checkbox and 2 positive dropdowns then show green tick.

Any chance you could help me out a bit, I’ve been at it for ages and still cant work it out.

I’m thinking something along this line, but I’m not right I know.

$card.find('.moduleElement input[type=checkbox]:checked && .moduleElement .moduleFrequencyPanel > option[value!=""].length == 0').each(function () {

and then how to check the count to either show the green tick or not.

4

You just need to check the length of $card.find(“…”)

5

Do you mean change it to be like this below, I have also added further context to it.

$(document).on('hide.bs.collapse', ".collapse", function () {
    var card = $(this).closest(".card");
    ProcessTickFunctionality(card);
});

function ProcessTickFunctionality($card) {    
var greenTick = $card.find('.moduleElement input[type=checkbox]:checked' && '.moduleElement .moduleFrequencyPanel > option[value!=""]').length;

    if (greenTick > 0) {
        $card.find('.greenTick').css({ "display": "inline" });
    } else {
        $card.find('.greenTick').css({ "display": "none" });
    }
}

It just doesnt seem to want to work, it must be my find logic on the extra check of the dropdowns, however it does work perfectly if I just look for the checked checkbox, which is great.

6

No I don’t. I just mean to check the length of the jQuery object given by the find method.

7

Ok thanks Paul, I’ll try and work it out. I’m not sure how to check all three have values to create the count at this point, but will get there

Cheers

8

When you use the :checked selector, jQuery gives you an object with an array-like structure. Each item in the jQuery object is a checked input field.

What’s wrong with just checking that the length of that array of checked input fields is greater than 1?

9

If you had a Timmy Mallet sponge hammer you be bashing me over the head by now I know, so I’m going to reply with below whilst looking over my shoulder, do you mean:

    $card.find('.moduleElement input[type=checkbox]:checked').each(function () {
        if ($(this).length > 0) {
            console.log("1");
            $card.find('.greenTick').css({ "display": "inline" });
        } else {
            console.log("2");
            $card.find('.greenTick').css({ "display": "none" });
        }
    });

This though is just checking the checkbox only, but its a start

10

The usual rules of working with toggleable items applies here. Start with them off, and when the conditions are right you can then turn them on.

I’d start by hiding the green tick.
You don’t need any each method.
If the condition is true (that condition being the found checkboxes have a length greater or equal to 2) then you want to show the green tick.

11

Yes that bit is done, i have the tickboxes set to display none:

<div class="greenTick" style="display:none;">&#10004;</div>
12

I don’t think that I should give the precise code, but similar code is:

greentick.hide();
if (checkedItems.length >= 2) {
    greentick.show();
}

That’s the type of simplicity that I’m promoting.

13

Even simpler than that is to use the jQuery toggle method, where it shows when true, and hides when false.

greentick.toggle(checkedItems.length >= 2);

Too simple?

14

Well I’m not going to say too simple to you Paul, its more than likley me as its just not working.

The way its set up is I have multiple ‘cards’ down the page, when the user opens up this module one they see around 16 checkboxes each with an image and when they select the checbox the 2 dropdowns appear and they need to select an option in both and then when closing the card it checks to see if there at least 3 together within each of those divs to allow the tick to show.

Its quite a complicated page as there other cards with input fields and dropdowns so each card is unique and this code only needs to look in the card that has been choosen.

I think you know this anyway, its just not working either way for me.

15

It sounds then like some kind of validation code is required, where you start off by assuming that everything is valid, and check for things that might make it invalid.

var isValid = true;
selectedImages.forEach(function (image) {
    var checkedOptions = ...
    if (checkedOptions.length !== 2) {
        isValid = false;
    }
});
// other checks can be done to affect isValid too
// and then
greentick.toggle(isValid);
16

If you want to get fancy, you can instead use the reduce method to modify the isValid value.

function validateOptionsReducer(isValid, image) {
    var checkedOptions = ...
    if (checkedOptions.length !== 2) {
        return false;
    }
    return isValid;
}
greentick.toggle(
    selectedImages.reduce(validateOptionsReducer, true)
);
17

I think i’m not advanced enough to work it in your way, I just don’t get it, but one thing I do now understand is why I cant use the each function, because if the condition of looking for :checked isn’t true it wont read it, so using that to turn the greenTick off is wrong, it just want happen.

To go back a touch I’m comfortable with this because I get it, but again I cant use it to say turn off the greenTick because its within the ProcessTickFunctionality($card) {

So if greenTick is equal to 0, it will turn the green ticks off from the other cards.

    var greenTick = $card.find('.moduleElement input[type=checkbox]:checked');

    if (greenTick.length > 0) {
        $card.find('.greenTick').show();
    }

So I’m back to basics really. I’ve put the whole function below, its not much, but it covers the whole lot of cards, so im getting conflict and then I need to add to the checkbox one I’m working on to check if the 2 dropdowns have values too.

Sorry to regress Paul, jquery isnt my best subject!

$(document).on('hide.bs.collapse', ".collapse", function () {
    var card = $(this).closest(".card");
    ProcessTickFunctionality(card);
});

function ProcessTickFunctionality($card) {
    $card.find(':input[data-required="true"]').each(function () {
        if ($(this).val() !== "") {
            $card.find('.greenTick').show();
        } else {
            $card.find('.greenTick').hide();
        }
    });

    var greenTick = $card.find('.moduleElement input[type=checkbox]:checked');

    if (greenTick.length > 0) {
        $card.find('.greenTick').show();
    } 
}
18

Your code seems to demonstrate a severe misunderstanding in regard to the greenTick variable.

The following is what I think that greenTick should refer to instead.

var greenTick = $card.find('.greenTick');
19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.