时间戳

首页 > 解决方案 > Javascript：设置checked=false不会从复选框中删除复选标记

javascript - Javascript：设置checked=false不会从复选框中删除复选标记

问题描述

我有一个嵌入在 div 中的复选框，如以下 HTML 所示：

<div>
    <div class="ms-Checkbox is-checked is-enabled root-751">
        <input type="checkbox" data-automation-id="ProductSkuId_18181a46-0d4e-45cd-891e-60aabd171b4e" class="input-521" id="checkbox-886" aria-label="Office 365 E1" aria-describedby="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e" aria-checked="true" value="18181a46-0d4e-45cd-891e-60aabd171b4e" checked="">
            <label class="ms-Checkbox-label label-738" for="checkbox-886">
                <div class="ms-Checkbox-checkbox checkbox-752">
                    <i data-icon-name="CheckMark" aria-hidden="true" class="ms-Checkbox-checkmark checkmark-754">&lt;/i>
                </div>
                <div class="css-742">
                    <div class="css-743" data-automation-id="LicenseText_Office 365 E1">Office 365 E1</div>
                </div>
            </label>
    </div>
    <div class="css-736" id="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e" data-automation-id="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e">
        <div class="css-735">‎12‎ of ‎591‎ licenses available</div>
    </div>
</div>

从上面我们可以看到，有一个“复选框”类型的输入，如果我使用以下 javascript：

$("#checkbox-886").prop('checked', false);

该框仍处于选中状态。我还尝试了以下方法：

document.getElementById("checkbox-886").removeAttribute("checked")

尽管我看到选中的属性已从输入中删除，但它仍然没有从复选框中删除复选标记。

我猜测复选框周围的 div 也有责任，因为我看到了“is-checked”属性，并且我不确定如何编写 javascript 来在通过 javascript 更改子元素时强制更改父元素。任何帮助或见解将不胜感激。提前致谢。

标签： javascriptjquery

解决方案

当您尝试取消选中该元素时，该元素可能尚未加载。将事件侦听器添加到DOMContentLoaded：

document.addEventListener("DOMContentLoaded", () => {
  document.getElementById("checkbox-886").checked = false
});
<div>
  <div class="ms-Checkbox is-checked is-enabled root-751">
    <input type="checkbox" data-automation-id="ProductSkuId_18181a46-0d4e-45cd-891e-60aabd171b4e" class="input-521" id="checkbox-886" aria-label="Office 365 E1" aria-describedby="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e" aria-checked="true" value="18181a46-0d4e-45cd-891e-60aabd171b4e"
      checked="">
    <label class="ms-Checkbox-label label-738" for="checkbox-886">
                <div class="ms-Checkbox-checkbox checkbox-752">
                    <i data-icon-name="CheckMark" aria-hidden="true" class="ms-Checkbox-checkmark checkmark-754">&lt;/i>
                </div>
                <div class="css-742">
                    <div class="css-743" data-automation-id="LicenseText_Office 365 E1">Office 365 E1</div>
                </div>
            </label>
  </div>
  <div class="css-736" id="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e" data-automation-id="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e">
    <div class="css-735">‎12‎ of ‎591‎ licenses available</div>
  </div>
</div>

推荐阅读