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で指定されているため、それを取得するだけです。checkedundefined

私はこれらのテクノロジーに非常に慣れておらず、いくつかの懸念があります。

「オプションのメンバー」は、存在するように明示的に作成する必要があることを意味しますか? もしそうなら、どうすればそれを行うことができますか?

ただし、checkedメンバーが存在する可能性があります。ユーザーがクリックするたびにその値を手動で処理する必要がありますか、それとも既に内部で管理されており、まだアクセスする方法が見つからないだけですか?

チェックボックスの html コードで行った間違いが見当たらないだけでしょうか。

前もって感謝します！

4

1 に答える 1

1

使用している、または使用しようとしているフレームワークに応じて、Office UI Fabric に関するドキュメントのソースがいくつかあります。選択肢は次のとおりです。

JavaScript のみのリンクを選択するルックアップ テーブルを作成し、それに従って目的のコンポーネントを見つけます。その前に、「Fabric JS の使用を開始する」を読むことをお勧めします。

バニラ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()。truefalse

于 2018-04-25T13:47:02.767 に答える