Question

请检查我的JavaScript代码。一旦我点击＆＃34;上传＆＃34;我总是得到＆＃34;你没有检查任何项目＆＃34;但是，我检查了一些项目，我得到相同的警报运行我如何纠正它，以便按照我选择的项目执行？

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

<form>
    <input type="checkbox" name="check_item" value="1">Item 1<br/>
    <input type="checkbox" name="check_item" value="2">Item 2<br/>
    <input type="checkbox" name="check_item" value="3">Item 3<br/>
    <input type="button" class="uploadExternal" value="Upload"/>

</form>

<script type="text/javascript">
    $(document).on("click", ".uploadExternal", function (e) {

                var check_item = document.getElementsByClassName("check_item");
                if (check_item.checked) {//check if check_item empty

                alert("You have checked item");

                } else {
                    alert("You didn't checked any item");
                }

            });
</script>

</body>
</html>

Answer 1

document.getElementsByClassName方法返回具有所有给定类名的所有子元素的array-like对象。

您应该通过所有项目检查是否有任何项目。

为此，您可以使用Array.from功能创建array，其中包含check_item类的所有复选框元素。

Array.from（）方法从中创建一个新的Array实例类似数组或可迭代的对象。

接下来，您必须检查是否至少有一个checkbox DOM元素checked。为此，您应该使用some函数。

some函数接受应用于上述数组中每个项目的callback提供的方法。

var checked=Array.from(check_item).some(function(checkbox){
  return checkbox.checked;
});

＆＃13;

$(document).on("click", ".uploadExternal", function (e) {
    var check_item = document.getElementsByClassName("check_item");
    var checked=Array.from(check_item).some(function(checkbox){
      return checkbox.checked;
    });
    if (checked){
        alert("You have checked item");
    } else {
        alert("You didn't checked any item");
    }  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="checkbox" class="check_item" name="check_item" value="1">Item 1<br/>
    <input type="checkbox" class="check_item" name="check_item" value="2">Item 2<br/>
    <input type="checkbox" class="check_item" name="check_item" value="3">Item 3<br/>
    <input type="button" class="uploadExternal" value="Upload"/>

</form>

＆＃13;

Answer 2

方法document.getElementsByClassName("check_item")返回一个元素数组。你需要迭代它们。使用checked属性，您可以确定是否选中了复选框。结果是这样的：

var check_item = document.getElementsByClassName("check_item");
var isChecked = false;
for (var i = 0; i < check_item.length; i++) {
    if (check_item[i].checked) {
        isChecked = true;
        break;
    }
}
if (isChecked) { ...

Answer 3

$(document).on("click", ".uploadExternal", function(e) {

  var check_item = document.getElementsByClassName("check_item");
  console.log(check_item);
  if (check_item[0].checked) { //check if check_item empty

    alert("You have checked item 1");

  } else if (check_item[1].checked) { //check if check_item empty

    alert("You have checked item 2");

  } else if (check_item[2].checked) { //check if check_item empty

    alert("You have checked item 3");

  } else {
    alert("You didn't checked any item");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="checkbox" class="check_item" value="1">Item 1<br/>
  <input type="checkbox" class="check_item" value="2">Item 2<br/>
  <input type="checkbox" class="check_item" value="3">Item 3<br/>
  <input type="button" class="uploadExternal" value="Upload" />
</form>

您已拨打document.getElementsByClassName("check_item");，但在您的HTML代码中，您没有提及类属性。

试试这个fiddle

Answer 4

请为所有商品添加课程代码或按名称提取商品

<script type="text/javascript">
$(document).on("click", ".uploadExternal", function (e) {

            var check_item = document.getElementsByName("check_item");
for(var i = 0; i < check_item.length; i++)
    {      
            if(check_item.item(i).checked)
            {
            alert("You have checked item");
            return ;
            }
    }
                alert("You didn't checked any item");

        });


  </script>

验证复选框选择

4 个答案: