Dynamically generated checkbox array from javascript did not display which checkbox is checked

Question

I have the following code, which suppose to display the value of those checkbox that is checked. However, it seems that it did not work as it was.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

    function myFunction() {
        var checkedvalue = "";
        var arrChecks = document.getElementById("blah");

        for (i = 0; i < arrChecks.length; i++) {
            var attribute = arrChecks[i].getAttribute("blah")
            if (attribute == elementName) {
                // if the current state is checked, unchecked and vice-versa
                if (arrChecks[i].checked) {
                    arrChecks[i].checked = false;
                } else {
                    arrChecks[i].checked = true;
                    checkedvalue = checkedvalue + " " + arrChecks[i].toString();
                }

            } else {
                arrChecks[i].checked = false;
            }
        }

        document.getElementById("demo").innerHTML = checkedvalue;
    }


    function makeCheckboxes(str) {
        var a = document.getElementById("blah");
        var arr = str;
        var returnStr = "";
        for (i = 0; i < arr.length; i++) {
            returnStr += '<input type="checkbox" name="theCheckbox" value="' + arr[i] + '" />' + arr[i];
        }
        a.innerHTML = returnStr;
    }

    window.onload = function () {
        var arrt = ["test1", "test2", "apple", "samsung", "nokia"];

        makeCheckboxes(arrt);
    };

</script>
<style type="text/css"></style>
</head>
<body>
   <table border="1">
      <tr>
         <td id="blah"></td>
         <td>checkboxes should appear left of here</td>
         <button onclick="myFunction()">Click me</button>
         <p id="demo"></p>
      </tr>
   </table>
</body>

Would appreciate if some kind soul can enlighten me.

The code is attempting to invert the selection (the if(arrChecks[i].checked) block), is that intentional? — Phil H
– Phil H, Commented Nov 9, 2012 at 9:28
@PhilH, Yes, the code is intent to invert the selection under the (if(arrChecks[i].checked)) code block — Jack
– Jack, Commented Nov 12, 2012 at 3:06

Heretic Monkey · Accepted Answer · 2017-04-05 18:56:18Z

getElementByID always returns one element. You should not include <p> element inside <td>.

Please use the below code block. This will give you the required output.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<script type="text/javascript">

    function myFunction() {
        debugger;
        var checkedvalue = "";
        var arrChecks = document.getElementsByName("theCheckbox");

        for (i = 0; i < arrChecks.length; i++) 
        {
            // if the current state is checked, unchecked and vice-versa
            if (arrChecks[i].checked) {
                arrChecks[i].checked = false;
            } else {
                arrChecks[i].checked = true;
                checkedvalue = checkedvalue + " " + arrChecks[i].getAttribute('value');
            }

        }

        document.getElementById("demo").innerHTML = checkedvalue;
    }


    function makeCheckboxes(str) {
        var a = document.getElementById("blah");
        var arr = str;
        var returnStr = "";
        for (i = 0; i < arr.length; i++) {
            returnStr += '<input type="checkbox" name="theCheckbox" value="' + arr[i] + '" />' + arr[i];
        }
        a.innerHTML = returnStr;
    }

    window.onload = function () {
        var arrt = ["test1", "test2", "apple", "samsung", "nokia"];

        makeCheckboxes(arrt);
    };

</script>
<style type="text/css"></style>
</head>
<body>
   <table border="1">
      <tr>
         <td id="blah"></td>
         <td>checkboxes should appear left of here</td>
         <button onclick="myFunction()">Click me</button>
      </tr>
   </table>

         <p id="demo"></p>
</body>
</html>

Phil H · Accepted Answer · 2012-11-09 10:10:20Z

Working jsfiddle.

Fixes:

Changed arrChecks to be an array of the checkboxes, by adding getElementsByTagName call:

document.getElementById("blah").getElementsByTagName('input');
Removed the getAttribute line(s) - now that you have the actual checkboxes, no need to filter
Changed checkedvalue line to use .value property, since we have a checkbox object.

Resulting myFunction function:

function myFunction() {
    var checkedvalue = "";
    var arrChecks = document.getElementById("blah").getElementsByTagName('input');

    for (i = 0; i < arrChecks.length; i++) {
        if (arrChecks[i].checked) {
            arrChecks[i].checked = false;
        } else {
            arrChecks[i].checked = true;
            checkedvalue = checkedvalue + " " + arrChecks[i].value;
        }
    }

    document.getElementById("demo").innerHTML = checkedvalue;
}

I'm concerned at the intended functionality here; it is changing all checked boxes to unchecked, and vice versa. So having checked an option and pressed the button, the selection is inverted and the newly checked (previously unchecked) options are listed in the div.

If you could have other input elements (not checkboxes), then you will need a guard thus:

function myFunction() {
    var checkedvalue = "";
    var arrInputs = document.getElementById("blah").getElementsByTagName('input');

    for (i = 0; i < arrChecks.length; i++) {
        if(arrInputs.type != 'checkbox')
            continue;

        var box = arrInputs[i];

        if (box.checked) {
            box.checked = false;
        } else {
            box.checked = true;
            checkedvalue = checkedvalue + " " + box.value;
        }
    }

    document.getElementById("demo").innerHTML = checkedvalue;
}

+1 Appreciate the extra effort in your answer by providing the jsfiddle and also mention about other input elements which I might miss it.

Collectives™ on Stack Overflow

Dynamically generated checkbox array from javascript did not display which checkbox is checked

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related