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>

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

4

2 回答 2

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>
于 2012-11-09T09:52:22.590 回答
1

工作 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;
}
于 2012-11-09T10:03:50.713 回答