Question

我试图限制列表中的选择-字符串复选框。但是，我似乎无法选择HTML中的对象。我正在使用带有对象的应用程序构建器，并尝试实现其他JavaScript代码。

我尝试使用document.getElementsByClassName（）、. querySelector（）和.getElementsByTag（）选择我的对象，但没有成功。

我不知道为什么该代码无法正常工作。可能是因为我无法正确构建代码或无法正确使用选择器吗？我对JavaScript并不是很熟悉，任何帮助或指导都将不胜感激。

var checks = document.querySelectorAll(".item");
var max = 2;
for (var i = 0; i < checks.length; i++)
  checks[i].onclick = selectiveCheck;

function selectiveCheck(event) {
  var checkedChecks = document.querySelectorAll(".item:checked");
  if (checkedChecks.length >= max + 1)
    return false;
}

<div id="MultiSelectBox" class="ListData SelectBox cbFormSelect" style="z- 
index: 1002; left: 109px; top: 43px; width: 107px; height: 151px; 
background-color: rgb(255, 255, 255);">
  <div class="Body" style="overflow-y: auto;">
    <div style="display: table; width: 100%;">

      <div style="">
        <div class="Item" style="outline: none;">
          <input type="checkbox" style="outline: none; margin-left: 0px; margin- 
right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_0"><label for="InsertRecordCheckList_3a4dfdb26cc834_checked_0">Apple</label></div>

        <div class="Item" style="outline: none;"><input type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_1"><label for="InsertRecordCheckList_3a4dfdb26cc834_checked_1">Banana</label></div>

        <div class="Item" style="outline: none;"><input type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_2"><label for="InsertRecordCheckList_3a4dfdb26cc834_checked_2">Melon</label></div>

        <div class="Item" style="outline: none;"><input type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_3"><label for="InsertRecordCheckList_3a4dfdb26cc834_checked_3">Mango</label></div>

        <div class="Item" style="outline: none;"><input type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_4"><label for="InsertRecordCheckList_3a4dfdb26cc834_checked_4">Grapes</label></div>

        <div class="Item" style="outline: none;"><input type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_5"><label for="InsertRecordCheckList_3a4dfdb26cc834_checked_5">Peach</label></div>
      </div>
    </div>
  </div>
</div>

预期结果非常简单，脚本不应不允许所有用户选择两个以上的选项。

Answer 1

您所做的完全错误。您正在检查“ .item：checked”，因此应该是具有“ item”类的复选框，而不是div 。

Points

休息还可以

如何使用JavaScript访问下面构造的HTML对象

1 个答案: