Question

在我的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检索其检查状态（或者它的咏叹调状态，我仍然没有得到它们之间的差异），我认为这是通过document.getElementById( 'labelId' ).checked，因为它在{{3中指定他们有一个可选的checked成员，但我只能得到一个undefined。

我对这些技术很陌生并且有几个问题：

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

然而，checked成员可能会存在，我是否必须在每次用户点击时手动处理其值，或者它是否已在内部管理，我根本没有找到访问它的方法了吗？

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

提前谢谢！

Answer 1

Office UI Fabric上有多个sources of documentation依赖于您正在使用或即将使用的框架。您的选择是：

JavaScript only（无框架）
React
Angular

从表格中选择JavaScript only链接，然后按照它查找您感兴趣的组件。在此之前，我建议您阅读＆＃34; Get Started using Fabric JS＆＃34;。

现在，当您获得有关vanilla JS实施的checkbox component的文档时，请按照步骤设置您的复选框。这将包括：

确认您在网页上引用了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是否已选中该组件。

Access和Office加载项复选框已选中状态

1 个答案: