set variable if any checbox is checked

Question

I have set of checkboxes let's say 5. I want to set some variable on change to true if any checkbox is checked and if none variable shoudl stay falsy. What I wrote is similar but it changes variable all the time so I can check 3 checkboxes then uncheck 1 and variable will be falsy even tho there are checked checkboxes. I found some solutions but most of them run with one checkbox or use Jquery

 let button;
 let check_this = document.querySelectorAll('.check_this')

 Array.from(check_this).forEach(function(checbox){
        checbox.addEventListener("change", function(){
            if(checbox.checked){
                button = true
            }else{
                button = false
            }

        });
    });

<input class="check_this" type="checkbox" value="1">
<input class="check_this" type="checkbox" value="2">
<input class="check_this" type="checkbox" value="3">
<input class="check_this" type="checkbox" value="4">
<input class="check_this" type="checkbox" value="5">

Your logic needs to set `true` if at least one box is checked, and `false` **if no boxes are checked**. — Rory McCrossan, Nov 24 '22 at 10:17
Does this answer your question? [Checkbox Check Event Listener](https://stackoverflow.com/questions/14544104/checkbox-check-event-listener) — Emre, Nov 24 '22 at 10:23
@Emre in a way yes but 0stone0 created way more elegant and cleaner version — itIsWhatItIs, Nov 24 '22 at 10:29

score 3 · Accepted Answer · edited Nov 24 '22 at 10:56

3

Use some() to check if at least one element has .checked

const onCheckboxChange = (event) => {
    let atLeastOneChecked = elements.some(e => e.checked);
    console.log('atLeastOneChecked:', atLeastOneChecked);
};

const elements = Array.from(document.querySelectorAll('.check_this'));
elements.forEach(e => e.addEventListener('change', onCheckboxChange));

<input class="check_this" type="checkbox" value="1">
<input class="check_this" type="checkbox" value="2">
<input class="check_this" type="checkbox" value="3">
<input class="check_this" type="checkbox" value="4">
<input class="check_this" type="checkbox" value="5" checked>

edited Nov 24 '22 at 10:56

ColdIV

1,118
2
13
21

answered Nov 24 '22 at 10:17

0stone0

34,288
4
39
64

1

I think OP also needs to capture the `change` event on all the elements so that when all checkboxes are unchecked, it needs to return false. – Maniraj Murugan Nov 24 '22 at 10:21
To my limited knowledge this will fire only once. How can I implement this on checkbox change? – itIsWhatItIs Nov 24 '22 at 10:23
1

I've updated my answer with an onChange funciton. – 0stone0 Nov 24 '22 at 10:25
1

I'm appreciate your answer it's very clean – itIsWhatItIs Nov 24 '22 at 10:30

set variable if any checbox is checked

1 Answers1