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

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>

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

Answer 1

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

<div style="">
        <div style="outline: none;">
            <input class="item" 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  style="outline: none;">
        <input class="item" 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 style="outline: none;">
        <input class="item" 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 style="outline: none;">
        <input class="item" 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 style="outline: none;">
        <input class="item" 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 style="outline: none;">
        <input class="item" 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>

休息就好