Question

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

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

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

Answer 1

getElementByID始终返回一个元素。您不应在<p>内添加<td>元素。

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

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

Answer 2

Working jsfiddle

修正：

通过添加arrChecks来电，将getElementsByTagName更改为复选框的数组：

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

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

2 个答案: