クイックスタート: チェックボックスコントロールの追加 (HTML)

[アーティクル]
03/04/2016

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

checkbox コントロールを作成する方法について説明します。ユーザーに二者択一、相互排他的でない 1 つ以上のオプション、混在する選択を提示するには、チェックボックスを使います。

必要条件

クイックスタート: HTML コントロールの追加とイベントの処理

チェックボックスの作成

checkbox を作成するには、input 要素を作成して、その type 属性を "checkbox" に設定します。**input 要素の終了タグの後に checkbox のテキストを追加します。

ヒント checkbox を追加するときは、label 要素で囲んで、ユーザー操作への応答領域のサイズを大きくします。こうすることで、タッチデバイスでチェックボックスを使いやすくなります。

既定では、チェックボックスは、ユーザーがクリックするまではオフの状態です。checkbox を最初からオンの状態にするには、checked 属性を使います。この例では、4 つのチェックボックスコントロールを作成し、checked 属性を使って 2 番目のチェックボックスコントロールをオンの状態にします。


.controlGroup
{
    margin: 0px 0px 20px 0px;
    padding: 0px;
    border: 0px;
}

.controlGroupName
{
    font:normal normal normal 11pt/15pt "Segoe UI Semilight";
    font-size: 11pt; 
    margin:0px 0px 10px 0px;
    padding:0px;
    border: 0px;
    position:relative;
    vertical-align:top;
    display:block;
}

.verticalStacking input[type="checkbox"]
{
    margin-bottom: 16px;
}

<div style="margin: 20px">
<fieldset class="controlGroup verticalStacking">
    <legend class="controlGroupName">Choose an option:</legend>
    <label>
        <input id="option1" type="checkbox" class="checkboxExample1"  />Option 1
    </label>
    <br />
    <label>
        <input id="option2" type="checkbox" class="checkboxExample1" checked />Option 2
    </label>
    <br />
    <label>
        <input id="option3" type="checkbox" class="checkboxExample1" />Option 3
    </label>
    <br />
    <label>
        <input id="option4" type="checkbox" class="checkboxExample1" />Option 4
    </label>
    </fieldset>
</div>

このコードを実行すると、オプション 1、3、4 はオフですが、オプション 2 はオンになっています。

4 つのチェックボックス

チェックボックスがオンになっているかどうかの判断

checkbox は、click イベントなど、他の input 要素と同じイベントをサポートします。ただし、checkbox はステータス情報のためのものであり、通常は動作をトリガーしません (次のセクションで説明する不確定状態のチェックボックスの場合は例外です)。チェックボックスの click イベントを処理し、チェックボックスの checked の状態に基づいてすぐに操作を実行するのではなく、通常は、ある種の "提示" ボタンをユーザーがクリックしたときにその checkbox の状態を読み取ります (操作を実行する必要がある場合は、代わりに ToggleSwitch コントロールを使います)。

チェックボックスがオンになっているかどうかを判断するには、checked プロパティを使います。次の例では、前の例で作成したチェックボックスコントロールの checked の値を表示する button を作成します。

function evaluateCheckboxState(eventInfo) {
    var outputDiv = document.getElementById("checkedStateOutput");
    var output = "<ul>";
    WinJS.Utilities.query(".checkboxExample1").forEach(function (checkbox) {
        output += "<li>" + checkbox.id + " checked: " + checkbox.checked + "</li>"; 
    }); 
    outputDiv.innerHTML = output + "</ul>"; 

}

WinJS.Namespace.define("CheckboxExamples",
    { evaluateCheckboxState: evaluateCheckboxState });

このコードを実行してボタンをクリックすると、次のようになります。

4 つのチェックボックス

不確定状態のチェックボックスの作成

オプションが複数のオブジェクトに適用される場合は、チェックボックスを使って、オプションの適用対象がすべてのオブジェクトか、一部のオブジェクトか、いずれにも適用されないかを示すことができます。オプションの適用対象がすべてのオブジェクトではなく、一部のオブジェクトである場合は、混在する選択を表すために、チェックボックスの indeterminate 状態を使います。

indeterminate プロパティは JavaScript でのみ設定できます。HTML で設定できる "indeterminate" 属性はありません。

注チェックボックスの indeterminate プロパティを変更しても、その checked の値が自動的に変更されることはありません。

この例では、"[Select all]" チェックボックスを作成して、その一連の子のチェックボックスコントロール (オプション 1 ～ 4) をオンまたはオフにします。

<fieldset class="controlGroup verticalStacking">
    <legend class="controlGroupName">Choose an option:</legend>

    <label>
        <input type="checkbox" id="selectAll" onclick="CheckboxExamples.checkAll(event)" />Select all
    </label>
    <div style="margin-left: 29px" onclick="CheckboxExamples.updateCheckboxes(event)">
        <label>
            <input id="Checkbox1" type="checkbox" class="checkboxExample2"  />Option 1
        </label>
        <br />
        <label>
            <input id="Checkbox2" type="checkbox" class="checkboxExample2" checked />Option 2
        </label>
        <br />
        <label>
            <input id="Checkbox3" type="checkbox" class="checkboxExample2" />Option 3
        </label>
        <br />
        <label>
            <input id="Checkbox4" type="checkbox" class="checkboxExample2" />Option 4
        </label>
    </div>

</fieldset>

これらのチェックボックスコントロールは次のようになります。

不確定の状態のチェックボックス

この例では、オンにした場合に checkAll 関数がトリガーされるように、selectAll チェックボックスの click イベントを処理します。

<input type="checkbox" id="selectAll" onclick="CheckboxExamples.checkAll(event)" />Select all

selectAll チェックボックスをオンまたはオフにすると、checkAll 関数によって、その他すべてのチェックボックスコントロールがオンまたはオフになります。

function checkAll(eventInfo) {

    var options = document.getElementsByClassName("checkboxExample2");
    for (var i = 0; i < options.length; i++) {
        options[i].checked = event.srcElement.checked;
    }
}

子のチェックボックスコントロールのいずれかがクリックされると、updateCheckboxes 関数が呼び出されます。

<div style="margin-left: 29px" onclick="CheckboxExamples.updateCheckboxes(event)">

この関数により、各チェックボックスのオン状態が検出され、selectAll チェックボックスが更新されます。

すべての子のチェックボックスがオンの場合、この関数により、selectAll チェックボックスの indeterminate 状態は false に設定され、checked の値は true に設定されます。
すべての子のチェックボックスがオフの場合、この関数により、selectAll チェックボックスの indeterminate 状態は false に設定され、checked の値は false に設定されます。
子のチェックボックスコントロールの一部がオンで、その他はオフの場合、この関数により、selectAll チェックボックスの indeterminate 状態は true に設定され、checked の値は false に設定されます。

function updateCheckboxes(eventInfo) {
    var options = document.getElementsByClassName("checkboxExample2");
    var selectedCount = 0;
    for (var i = 0; i < options.length; i++) {
        if (options[i].checked) {
            selectedCount++;
        }
    }

    // Update the selectAll checkbox
    // to reflect the state of the child checkboxes.
    var selectAll = document.getElementById("selectAll"); 
    if (options.length === selectedCount) {
        selectAll.indeterminate = false;
        selectAll.checked = true;
    } else if (0 === selectedCount) {
        selectAll.indeterminate = false;
        selectAll.checked = false;
    } else {
        selectAll.indeterminate = true;
        //selectAll.checked = false;
    }
}

次の例では、WinJS.Namespace.define を使って、checkAll と updateCheckboxes を公開します。

WinJS.Namespace.define("CheckboxExamples",
    {
        checkAll: checkAll,
        updateCheckboxes: updateCheckboxes
    });

ここでもう 1 つ実行することがあります。2 番目のオプションは最初から checked 状態です。

<label>
    <input id="Checkbox2" type="checkbox" class="checkboxExample2" checked />Option 2
</label>

selectAll チェックボックスは最初はオフまたはオンの状態で、ユーザーがチェックボックスをクリックするまで updateCheckboxes メソッドは呼び出されません。そのため、例のコードを実行すると、selectAll チェックボックスは、不確定の状態であるべき場合でもオフになります。

不確定の状態の [すべて選択] チェックボックス

この問題を解決するには、ページの読み込み時に updateCheckboxes の呼び出しを追加します。

コードが PageControl にある場合は、ready メソッドを使って updateCheckboxes を呼び出します。
コードがアプリの default.js ファイルにある場合は、activated イベントハンドラーを使って updateCheckboxes を呼び出します。
どちらの場合も、DOMContentLoaded イベントを処理し、ハンドラーを使って updateCheckboxes を呼び出すことができます。

この例では、PageControl を使っているため、ready メソッドから updateCheckboxes を呼び出します。

WinJS.UI.Pages.define("/pages/checkbox/checkbox.html", {
    // This function is called whenever a user navigates to this page. It
    // populates the page elements with the app's data.
    ready: function (element, options) {
        // TODO: Initialize the page here.

        CheckboxExamples.updateCheckboxes(); 
    },

    unload: function () {
        // TODO: Respond to navigations away from this page.
    },

    updateLayout: function (element, viewState, lastViewState) {
        /// <param name="element" domElement="true" />

        // TODO: Respond to changes in viewState.
    }
});

要約と次のステップ

checkbox コントロールを作成する方法、状態を調べる方法、indeterminate プロパティを使って不確定の状態を示す方法について説明しました。

次は、チェックボックスコントロールのスタイルを指定する方法についてご覧ください。

クイックスタート: チェックボックスコントロールの追加 (HTML)

必要条件

チェックボックスの作成

チェックボックスがオンになっているかどうかの判断

不確定状態のチェックボックスの作成

要約と次のステップ

関連トピック

その他のリソース

クイック スタート: チェック ボックス コントロールの追加 (HTML)

必要条件

チェック ボックスの作成

チェック ボックスがオンになっているかどうかの判断

不確定状態のチェック ボックスの作成

要約と次のステップ

関連トピック

その他のリソース

クイックスタート: チェックボックスコントロールの追加 (HTML)

チェックボックスの作成

チェックボックスがオンになっているかどうかの判断

不確定状態のチェックボックスの作成