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 个选项。

标签： javascript

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>

休息还可以