从 javascript 动态生成的复选框数组未显示选中了哪个复选框答案

【问题标题】：Dynamically generated checkbox array from javascript did not display which checkbox is checked从 javascript 动态生成的复选框数组未显示选中了哪个复选框
【发布时间】：2012-10-29 14:27:21
【问题描述】：

我有以下代码，假设显示那些被选中的复选框的值。但是，它似乎并没有按原样工作。

<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>

如果有好心人能启发我，将不胜感激。

【问题讨论】：

代码试图反转选择（if(arrChecks[i].checked) 块），这是故意的吗？
@PhilH，是的，该代码旨在反转 (if(arrChecks[i].checked)) 代码块下的选择

标签： javascript onclick checkbox checked

【解决方案1】：

getElementByID 总是返回一个元素。您不应在 <td> 中包含 <p> 元素。

请使用以下代码块。这将为您提供所需的输出。

<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>

【讨论】：

【解决方案2】：

Working jsfiddle.

修复：

通过添加getElementsByTagName 调用将arrChecks 更改为复选框数组：

document.getElementById("blah").getElementsByTagName('input');
删除了 getAttribute 行 - 现在您有了实际的复选框，无需过滤
将checkedvalue 行更改为使用.value 属性，因为我们有一个复选框对象。

产生myFunction函数：

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;
}

我担心这里的预期功能；它将所有选中的框更改为未选中，反之亦然。因此，选中一个选项并按下按钮后，选择会反转，新选中（以前未选中）的选项会列在 div 中。

如果您可以有其他 input 元素（不是复选框），那么您将需要一个守卫：

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 通过提供 jsfiddle 来感谢您在回答中付出的额外努力，并提及我可能会错过的其他 input 元素。