访问和办公室加载项复选框检查状态

Question

在我的办公室加载项中，我有一个复选框，如下：

<div class="ms-CheckBox">
    <input id="inputId" type="checkbox" class="ms-CheckBox-input" />
    <label id="labelId" role="checkbox" class="ms-CheckBox-field" aria-checked="false" name="checkboxA" for="inputId>
        <span class="ms-Label">Text</span>
    </label>
</div>

我想通过JavaScript检索其检查状态(或其ARIA-CKECKECKECKECKECKECKECKECKECKECT状态，我仍然没有得到它们之间的差异(，我认为这是通过document.getElementById( 'labelId' ).checked，因为它在文档中指定了它们具有可选的checked成员，但我只得到undefined。

我是这些技术的新手，并且有几个问题：

"可选成员"是否意味着我必须明确创建它以使其存在？如果是这样，我该怎么做？

但是，checked成员可能会出现，我是否必须每次点击用户点击它或已经内部管理它，我还没有找到访问它的方法？p>也许我只是看不到我在复选框上的HTML代码上犯的错误？

预先感谢您！

Answer 1

您在Office UI织物上有几个文档来源取决于您正在使用或即将使用的框架。您的选择是：

• 仅JavaScript(无框架(
• React
• Angular

形成查找表，您只需选择JavaScript链接并关注它以找到您感兴趣的组件。在此之前，我建议阅读"开始使用Fabric JS"。

现在，当您在Vanilla JS实现的复选框组件上具有文档时，请按照设置复选框的步骤进行操作。这包括：

• 确认您在页面上有提及面料的CSS和JavaScript

• 将HTML从下面的样本之一复制到您的页面。

  <div class="ms-CheckBox">
    <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
    <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
        <span class="ms-Label">Checkbox</span> 
    </label>
  </div>
  

• 在您的页面上添加以下标签，下面是Fabric JS的引用，以实例化页面上的所有复选框组件。

  <script type="text/javascript">
      var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
      for (var i = 0; i < CheckBoxElements.length; i++) {
          new fabric['CheckBox'](CheckBoxElements[i]);
      }
  </script>
  

• 获取复选框的状态使用方法getValue()返回true或false是否检查组件。