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

【问题标题】：Javascript: Setting checked=false is not removing checkmark from the checkboxJavascript：设置checked=false不会从复选框中删除复选标记
【发布时间】：2021-06-14 10:58:39
【问题描述】：

我有一个嵌入在 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"></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 更改子元素时强制更改父元素.任何帮助或见解将不胜感激。提前致谢。

【问题讨论】：

你好，你在用插件吗？
您的代码，提供工作正常。 jsfiddle.net/5uo48206 很可能您在复选框（第 3 方插件）周围有一些其他“包装器”，它用自己的表示替换复选框（可能是图像，可能是：<i data-icon-class="ms-Checkbox-checkmark checkmark-754">）和一些 css 来隐藏实际的复选框.您需要使用插件的 API 来更改状态。或者删除插件。或者至少，告诉我们它是什么！

标签： javascript jquery

【解决方案1】：

请从您的控件中删除 checked=""(

如果你想检查你的复选框，那么只能从 java 脚本中进行。

所以，你的代码会是这样的

<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">
           <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"></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 将是

document.getElementById("checkbox-886").checked=false;

【讨论】：

如果你想检查你的复选框，那么只能从 java script[sic] 中进行 - 抱歉，这是一个糟糕的主意。页面应该在渲染时启动以减少 FOUC - 你希望它加载页面的最后一件事然后在几秒钟后（当它完成加载/解析所有内容时）突然所有的复选框都会自己打勾。这只是令人讨厌的用户体验。
好的..但是您的问题将通过删除属性来解决。
如何解决这个问题？ OPs 代码，提供，已经按原样工作，所以如果你删除它去“看，它工作”，这意味着什么，因为它没有删除它就可以工作，而且没有办法知道它是否工作对于他们的实际场景中无响应的OP。

【解决方案2】：

当您尝试取消选中该元素时，该元素可能尚未加载。给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"></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>

【讨论】：

我已经尝试过了，不幸的是，它仍然没有从框中删除复选标记
@Spectre 这个方法我试过了，还是不行

【解决方案3】：

从输入标签中删除选中的 = ""。然后 javascript 将正常工作。

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

【讨论】：