Making sure at least one checkbox is checked

Question

I have a form with multiple checkboxes and I want to use JavaScript to make sure at least one is checked. This is what I have right now but no matter what is chosen an alert pops up.

JS (wrong)

function valthis(){
 if (document.FC.c1.checked) {
   alert ("thank you for checking a checkbox")
  } else  {
   alert ("please check a checkbox")
  }
}

HTML

<p>Please select at least one Checkbox</p>
<br>
<br>
<form name = "FC">
<input type = "checkbox" name = "c1" value = "c1"/> C1 
<br>
<input type = "checkbox" name = "c1" value = "c2"/> C2
<br>
<input type = "checkbox" name = "c1" value = "c3"/> C3
<br> 
<input type = "checkbox" name = "c1" value = "c4"/> C4 
<br>
</form>
<br>
<br>

<input type = "button" value = "Edit and Report" onClick = "valthisform();">

So what I ended up doing in JS was this:

function valthisform(){
 var chkd = document.FC.c1.checked || document.FC.c2.checked||document.FC.c3.checked|| document.FC.c4.checked

 if (chkd == true){

 } else {
    alert ("please check a checkbox")
 }

}

I decided to drop the "Thank you" part to fit in with the rest of the assignment. Thank you so much, every ones advice really helped out.

@ŠimeVidas 7 years later I'm curious if you still have the same question — zanderwar, Jul 17 '19 at 01:03

mash · Accepted Answer · 2016-06-03T01:28:13.643

45

You should avoid having two checkboxes with the same name if you plan to reference them like document.FC.c1. If you have multiple checkboxes named c1 how will the browser know which you are referring to?

Here's a non-jQuery solution to check if any checkboxes on the page are checked.

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);

You need the Array.prototype.slice.call part to convert the NodeList returned by document.querySelectorAll into an array that you can call some on.

edited Jun 03 '16 at 01:28

answered Aug 03 '12 at 00:40

mash

14,851
3
30
33

1

Thank you, I was looking to avoid the JQuery but your second suggestion helped quite a bit. – MegaSly Aug 03 '12 at 03:43
21

@Mash `You should never have two elements with the same names` WHAT????? Then how do you write radios? – Alexandre Khoury Aug 09 '12 at 04:27
4

*"You should avoid having two elements with the same name"* - Wrong. Using duplicate element names is valid, works in all browsers, and works fine server-side once the form is submitted. As Mageek said, it's how you create radio groups, but it's valid with other form elements too. – nnnnnn May 10 '16 at 12:55
@nnnnnn I updated this 4-year old answer since it contained some misinformation, also updated with a more modern solution. Please let me know if it still contains misinformation or if there are any other improvements you see that it needs. Thanks! – mash Jun 03 '16 at 01:29
if one does not use a name - how else will you loop only specific checkbox groups? – TV-C-1-5 Oct 21 '17 at 20:09
1

@MartinJames I'm curious to understand why you think this answer is so bad. The solution works perfectly fine, and OP has updated the original answer. – Jihoon Baek Jul 07 '19 at 19:13
@JihoonBaek - I think I may have commented on the wrong answer. – Martin James Sep 01 '19 at 15:48

Alexandre Khoury · Answer 2 · 2015-06-05T20:45:00.590

26

This should work:

function valthisform()
{
    var checkboxs=document.getElementsByName("c1");
    var okay=false;
    for(var i=0,l=checkboxs.length;i<l;i++)
    {
        if(checkboxs[i].checked)
        {
            okay=true;
            break;
        }
    }
    if(okay)alert("Thank you for checking a checkbox");
    else alert("Please check a checkbox");
}

If you have a question about the code, just comment.

^{I use l=checkboxs.length to improve the performance. See http://www.erichynds.com/javascript/javascript-loop-performance-caching-the-length-property-of-an-array/}

edited Jun 05 '15 at 20:45

answered Aug 03 '12 at 00:48

Alexandre Khoury

3,896
5
37
58

Thanks. I was searching on how to validate checkboxes and this worked for me – user1815823 Apr 06 '13 at 14:24
I was forced with this problem, but your code solved my problem +1 – offboard Oct 05 '13 at 19:12
2

One break after the "okay=true" will optimize a little bit :P – pesho hristov Jun 03 '15 at 09:41
@peshohristov True! I don't know how I have forgotten to put that. – Alexandre Khoury Jun 05 '15 at 20:44

score 11 · Answer 3 · answered Jan 01 '20 at 21:00

I would opt for a more functional approach. Since ES6 we have been given such nice tools to solve our problems, so why not use them. Let's begin with giving the checkboxes a class so we can round them up very nicely. I prefer to use a class instead of input[type="checkbox"] because now the solution is more generic and can be used also when you have more groups of checkboxes in your document.

HTML

    <input type="checkbox" class="checkbox" value=ck1 /> ck1<br />
    <input type="checkbox" class="checkbox" value=ck2 /> ck2<br />

JavaScript

function atLeastOneCheckboxIsChecked(){
    const checkboxes = Array.from(document.querySelectorAll(".checkbox"));
    return checkboxes.reduce((acc, curr) => acc || curr.checked, false);
}

When called, the function will return false if no checkbox has been checked and true if one or both is.

It works as follows, the reducer function has two arguments, the accumulator (acc) and the current value (curr). For every iteration over the array, the reducer will return true if either the accumulator or the current value is true. the return value of the previous iteration is the accumulator of the current iteration, therefore, if it ever is true, it will stay true until the end.

Thank you for explaining the reducer. Works perfectly! – MDickten Oct 13 '22 at 09:52 — MDickten, Oct 13 '22 at 09:52

Temp · Answer 4 · 2012-08-03T01:40:25.867

2

Check this.

You can't access form inputs via their name. Use document.getElements methods instead.

edited Aug 03 '12 at 01:40

answered Aug 03 '12 at 01:19

Temp

43
4

Kyle Vassella · Answer 5 · 2017-02-25T15:53:56.737

Vanilla JS:

var checkboxes = document.getElementsByClassName('activityCheckbox'); // puts all your checkboxes in a variable

function activitiesReset() {
    var checkboxesChecked = function () { // if a checkbox is checked, function ends and returns true. If all checkboxes have been iterated through (which means they are all unchecked), returns false.
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                return true;
            }
        }
        return false;
    }
    error[2].style.display = 'none'; // an array item specific to my project - it's a red label which says 'Please check a checkbox!'. Here its display is set to none, so the initial non-error label is visible instead. 
        if (submitCounter > 0 && checkboxesChecked() === false) { // if a form submit has been attempted, and if all checkboxes are unchecked
            error[2].style.display = 'block'; // red error label is now visible.
        }
}

for (var i=0; i<checkboxes.length; i++) {  // whenever a checkbox is checked or unchecked, activitiesReset runs.
    checkboxes[i].addEventListener('change', activitiesReset);
}

Explanation:
Once a form submit has been attempted, this will update your checkbox section's label to notify the user to check a checkbox if he/she hasn't yet. If no checkboxes are checked, a hidden 'error' label is revealed prompting the user to 'Please check a checkbox!'. If the user checks at least one checkbox, the red label is instantaneously hidden again, revealing the original label. If the user again un-checks all checkboxes, the red label returns in real-time. This is made possible by JavaScript's onchange event (written as .addEventListener('change', function(){});

score 1 · Answer 6 · answered Jan 20 '18 at 12:16

You can check that atleast one checkbox is checked or not using this simple code. You can also drop your message.

Reference Link

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox2" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox2" value=ck2 /> ck2<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>

Having the same name on multiple ID attributes is basically invalid HTML and will likely not perform as most people would expect. Also not a great idea to have the checkboxes named the same, as you have done. Like, if one has a value of "xxx" and the other has a value of "Hmm", you're going to have some issues. — McAuley, Jul 11 '20 at 22:39

crashtestxxx · Answer 7 · 2019-05-31T15:55:55.073

Prevent user from deselecting last checked checkbox.
jQuery (original answer).

$('input[type="checkbox"][name="chkBx"]').on('change',function(){
    var getArrVal = $('input[type="checkbox"][name="chkBx"]:checked').map(function(){
        return this.value;
    }).toArray();

    if(getArrVal.length){
        //execute the code
        $('#msg').html(getArrVal.toString());

    } else {
        $(this).prop("checked",true);
        $('#msg').html("At least one value must be checked!");
        return false;

    }
});

UPDATED ANSWER 2019-05-31
Plain JS

let i,
    el = document.querySelectorAll('input[type="checkbox"][name="chkBx"]'),
    msg = document.getElementById('msg'),
    onChange = function(ev){
        ev.preventDefault();
        let _this = this,
            arrVal = Array.prototype.slice.call(
                document.querySelectorAll('input[type="checkbox"][name="chkBx"]:checked'))
                    .map(function(cur){return cur.value});

        if(arrVal.length){
            msg.innerHTML = JSON.stringify(arrVal);
        } else {
            _this.checked=true;
            msg.innerHTML = "At least one value must be checked!";
        }
    };

for(i=el.length;i--;){el[i].addEventListener('change',onChange,false);}

<label><input type="checkbox" name="chkBx" value="value1" checked> Value1</label>
<label><input type="checkbox" name="chkBx" value="value2"> Value2</label>
<label><input type="checkbox" name="chkBx" value="value3"> Value3</label>
<div id="msg"></div>

Nobody tagged jQuery. The OP is clearly using pure Javascript in their question. — Martin James, May 29 '19 at 19:46
@MartinJames Since the time I have answered this question, original one has been modified slightly. I agree with you about OP did not ask anywhere about using jQuery, but at the same it is not wrong answer, so no need to down vote. Just fyi... jQuery build on JS, and back in the days, it was used more often in web applications to support legacy browsers. — crashtestxxx, May 31 '19 at 16:04

score 0 · Answer 8 · edited Jan 10 '16 at 14:47

< script type = "text/javascript" src = "js/jquery-1.6.4.min.js" >  <  / script >
     < script type = "text/javascript" >

function checkSelectedAtleastOne(clsName) {
    if (selectedValue == "select")
        return false;

    var i = 0;
    $("." + clsName).each(function () {

        if ($(this).is(':checked')) {
            i = 1;
        }

    });

    if (i == 0) {
        alert("Please select atleast one users");
        return false;
    } else if (i == 1) {
        return true;
    }

    return true;

}

$(document).ready(function () {
    $('#chkSearchAll').click(function () {

        var checked = $(this).is(':checked');
        $('.clsChkSearch').each(function () {
            var checkBox = $(this);
            if (checked) {
                checkBox.prop('checked', true);
            } else {
                checkBox.prop('checked', false);
            }
        });

    });

    //for select and deselect 'select all' check box when clicking individual check boxes
    $(".clsChkSearch").click(function () {

        var i = 0;
        $(".clsChkSearch").each(function () {

            if ($(this).is(':checked')) {}
            else {

                i = 1; //unchecked
            }

        });

        if (i == 0) {
            $("#chkSearchAll").attr("checked", true)
        } else if (i == 1) {

            $("#chkSearchAll").attr("checked", false)
        }

    });

});

<  / script >

score 0 · Answer 9 · answered May 24 '22 at 06:02

$('input:checkbox[type=checkbox]').on('change',function(){
    if($('input:checkbox[type=checkbox]').is(":checked") == true){
        $('.removedisable').removeClass('disabled');    
    }else{
        $('.removedisable').addClass('disabled');   
    });

score -1 · Answer 10 · answered Jun 05 '19 at 10:40

-1

if(($("#checkboxid1").is(":checked")) || ($("#checkboxid2").is(":checked"))
            || ($("#checkboxid3").is(":checked"))) {
 //Your Code here
}

You can use this code to verify that checkbox is checked at least one.

Thanks!!

answered Jun 05 '19 at 10:40

Nitika Chopra

1,281
17
22

Making sure at least one checkbox is checked

10 Answers10

Linked

Related