Question

html：

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="style.css">
            <script src="scripts.js"></script>
        </head>

        <body>
            <button id = "button1" type="button" onclick="filterValues();">Submit</button>
        </body>
    </html>

我的javascript：

var checkingValues = ["Cat", "Dog", "Horse", "Tree"];
var createCheckboxes;

var saveValues;
document.write("Choose from the options below:  </br> </br>");

for (var i = 0; i < checkingValues.length; i++) { 

    createCheckboxes = document.createElement("INPUT");
    var checkbox = createCheckboxes.setAttribute("type", "checkbox");
    createCheckboxes.setAttribute("value", checkingValues[i]);

    var checkBoxText = document.body.appendChild(createCheckboxes) + document.write(createCheckboxes.value +"</br>");
}

//try to save checked values
if(createCheckboxes.checked){
        saveValues = checkbox;
    }

function filterValues() {

    document.write(saveValues);
}

我的想法是生成一个复选框并打印（过滤）复选框中的所选项目，方法是将所选项目保存到新阵列中，然后将其打印出来。我觉得我需要为此做一个简单的if语句，但我似乎无法在全局saveValues变量中写入值。我知道这不是最聪明的方法，但我想知道如何做到这一点。我想使用纯JS。

感谢。

Answer 1

如果您仅限于纯Javascript，则可以始终执行以下操作：

var inputs = document.getElementsByTagName('input');
for(var i=0; i < inputs.length; i++){
  if(inputs[i].type == 'checkbox' && inputs[i].checked) {
    //print
    console.log(inputs[i].value);
  }
}

这将获得页面上所有选中的复选框并打印其值。您可以执行其他逻辑，或将复选框添加到第二个阵列以供以后使用，而不是打印到控制台。

Answer 2

试试这个，

function filterValues（）{

for (var i = 0; i < checkingValues.length; i++) { 

  if(createCheckboxes.checked){
        saveValues = checkbox;
    }
}

document.write(saveValues);

}

如何打印选中的复选框值？

2 个答案: