javascript动态生成的复选框数组未显示选中的复选框_Javascript_Onclick_Checkbox_Checked

javascript动态生成的复选框数组未显示选中的复选框

javascript checkbox

javascript动态生成的复选框数组未显示选中的复选框,javascript,onclick,checkbox,checked,Javascript,Onclick,Checkbox,Checked,我有下面的代码，它假设显示那些被选中的复选框的值。然而，它似乎并没有像原来那样起作用 <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" /> <

我有下面的代码，它假设显示那些被选中的复选框的值。然而，它似乎并没有像原来那样起作用

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


函数myFunction（）{
var checkedvalue=“”；
var arrChecks=document.getElementById（“blah”）；
对于（i=0；i

如果有善良的灵魂能启发我，我将不胜感激。

getElementByID总是返回一个元素。您不应该在

中包含

元素

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

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


函数myFunction（）{
调试器；
var checkedvalue=“”；
var arrChecks=document.getElementsByName（“theCheckbox”）；
对于（i=0；i

修正：

通过添加

getElementsByTagName

调用，将

arrChecks

更改为复选框数组：

document.getElementById（“blah”）.getElementsByTagName（“输入”）


删除了getAttribute
行-现在您已经有了实际的复选框，无需进行筛选
更改了checkedvalue
行以使用.value
属性，因为我们有一个checkbox对象


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

代码试图反转选择（if（arrChecks[i].checked）
块），这是故意的吗？@PhilH，是的，代码打算反转（if（arrChecks[i].checked）
）代码块+1感谢您在回答中提供了JSFIDLE，并提到了我可能会错过的其他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;
}