Validate checkbox selections

Question

Please check my JavaScript code bellow. Once i click on "Upload" i am always getting "You didn't checked any item" however i checked some item i get same alert run. How can i correct it so it will execute as per item i have selected?

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

<form>
    <input type="checkbox" name="check_item" value="1">Item 1<br/>
    <input type="checkbox" name="check_item" value="2">Item 2<br/>
    <input type="checkbox" name="check_item" value="3">Item 3<br/>
    <input type="button" class="uploadExternal" value="Upload"/>

</form>

<script type="text/javascript">
    $(document).on("click", ".uploadExternal", function (e) {

                var check_item = document.getElementsByClassName("check_item");
                if (check_item.checked) {//check if check_item empty

                alert("You have checked item");

                } else {
                    alert("You didn't checked any item");
                }

            });
</script>

</body>
</html>

Possible duplicate of [How to correctly iterate through getElementsByClassName](https://stackoverflow.com/questions/15843581/how-to-correctly-iterate-through-getelementsbyclassname) | `.getElementsByClassName()` returns an array, you have to use a loop in order to check if any of the items are `.checked` — yuriy636, Jul 25 '17 at 10:14
In your markup, `check_item` is not a class on the input elements, but the form name under which their data will be posted. Use the `class` attribute to set class name on elements. — DarthJDG, Jul 25 '17 at 10:15

Mihai Alexandru-Ionut · Answer 1 · 2017-07-25T10:23:36.033

document.getElementsByClassName method returns an array-like object of all child elements which have all of the given class names.

You should itare through all the items to check if any is checked.

For this, you can use Array.from function to create an array which includes all the checkbox elements with check_item class.

The Array.from() method creates a new Array instance from an array-like or iterable object.

Next, you have to check if there is at least a checkbox DOM element which is checked. For this, you should use some function.

some function accepts a callback provided method applied on every item in above array.

var checked=Array.from(check_item).some(function(checkbox){
  return checkbox.checked;
});

$(document).on("click", ".uploadExternal", function (e) {
    var check_item = document.getElementsByClassName("check_item");
    var checked=Array.from(check_item).some(function(checkbox){
      return checkbox.checked;
    });
    if (checked){
        alert("You have checked item");
    } else {
        alert("You didn't checked any item");
    }  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="checkbox" class="check_item" name="check_item" value="1">Item 1<br/>
    <input type="checkbox" class="check_item" name="check_item" value="2">Item 2<br/>
    <input type="checkbox" class="check_item" name="check_item" value="3">Item 3<br/>
    <input type="button" class="uploadExternal" value="Upload"/>

</form>

score 0 · Accepted Answer · answered Jul 25 '17 at 10:15

The method document.getElementsByClassName("check_item") returns an array of elements. You need to iterate over them. With the checked attribute you can determine if the checkbox is checked. The result is something like this:

var check_item = document.getElementsByClassName("check_item");
var isChecked = false;
for (var i = 0; i < check_item.length; i++) {
    if (check_item[i].checked) {
        isChecked = true;
        break;
    }
}
if (isChecked) { ...

score 0 · Answer 3 · answered Jul 25 '17 at 10:22

$(document).on("click", ".uploadExternal", function(e) {

  var check_item = document.getElementsByClassName("check_item");
  console.log(check_item);
  if (check_item[0].checked) { //check if check_item empty

    alert("You have checked item 1");

  } else if (check_item[1].checked) { //check if check_item empty

    alert("You have checked item 2");

  } else if (check_item[2].checked) { //check if check_item empty

    alert("You have checked item 3");

  } else {
    alert("You didn't checked any item");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="checkbox" class="check_item" value="1">Item 1<br/>
  <input type="checkbox" class="check_item" value="2">Item 2<br/>
  <input type="checkbox" class="check_item" value="3">Item 3<br/>
  <input type="button" class="uploadExternal" value="Upload" />
</form>

you have called document.getElementsByClassName("check_item"); but in your html code u didn't mentioned about class attribute.

Try this fiddle

hariprasath parthasarathy · Answer 4 · 2017-07-25T10:32:03.507

Please add class tag to all of your items or fetch items by name

<script type="text/javascript">
$(document).on("click", ".uploadExternal", function (e) {

            var check_item = document.getElementsByName("check_item");
for(var i = 0; i < check_item.length; i++)
    {      
            if(check_item.item(i).checked)
            {
            alert("You have checked item");
            return ;
            }
    }
                alert("You didn't checked any item");

        });


  </script>

Validate checkbox selections

4 Answers4