1

在我的 Office 加载项中，我有一个如下所示的复选框：

<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-ckecked 状态，我仍然没有得到它们之间的差异），我认为这是通过document.getElementById( 'labelId' ).checked，因为它在文档中指定它们有一个可选checked成员，但我只能得到一个undefined。

我对这些技术非常陌生，并且有几个担忧：

“可选成员”是否意味着我必须明确创建它才能存在？如果是这样，我该怎么做？

但是该checked成员可能会存在，每次用户单击它时我是否必须手动处理它的值，或者它是否已经在内部管理并且我只是还没有找到访问它的方法？

也许我只是看不到我在复选框的 html 代码上犯的错误？

先感谢您！

4

1 回答 1

1

您有多个关于 Office UI Fabric的文档来源，具体取决于您正在使用或将要使用的框架。您的选择是：

形成查找表，您将选择仅 JavaScript链接并按照它查找您感兴趣的组件。在此之前，我建议阅读“开始使用 Fabric JS ”。

现在，当您拥有有关 vanilla JS 实现的复选框组件的文档时，请按照步骤设置您的复选框。这将包括：

  • 确认您的页面上有对 Fabric 的 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 的引用下方，以实例化页面上的所有 CheckBox 组件。

    <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组件是否被选中的方法。

于 2018-04-25T13:47:02.767 回答