PDFビューワでは、ラジオボタンとチェックボックスボタンの外観をカスタマイズして描画できます。 このビューワには、fieldsAppearanceオプションを使用して構成できる外観の3種類の描画を提供します。

Custom

Customは、デフォルトの外観の種類であり、PDFドキュメントで定義されているスタイルに似ています。以下の図に示すように、背景色と境界線のスタイルを設定することができます。

Web

プラットフォーム ネイティブなスタイルを使用した標準のフォームフィールドの外観です。 スタイルは、使用されているOSやブラウザによって異なります。 詳細については、こちらをご参照ください。以下の図に示すように、PDFドキュメントのラジオボタンとチェックボックスボタンの「Web」の外観を示しています。

var viewer = new DsPdfViewer("#root", { fieldsAppearance: { radioButton: "Web", checkBoxButton: "Web" } });

Predefined

この種類の外観は、PDFで定義されているようにラジオボタンとチェックボックスボタンを描画します。「Predefined」外観は、PDFドキュメント（利用可能な場合）からストリーミングされます。それ以外の場合は、Customの外観が使用されます。次の図は、PDFドキュメントのラジオボタンとチェックボックスボタンの「Predefined」の外観を示しています。

var viewer = new DsPdfViewer("#root", { fieldsAppearance: { radioButton: "Predefined", checkBoxButton: "Predefined" } });

ラジオボタンとしてチェックボックスの動作を設定する

Pdf ビューワでは、同じ名前のチェックボックスを作成する場合、各チェックボックスの動作を設定でき、フィールド値 プロパティと選択値プロパティを使用して一度に 1 つのチェックボックスのみをチェックできます。 フィールド値プロパティは、クライアントスクリプトコードの fieldValue を参照します。このプロパティは、同じ名前のチェックボックス間で共有されます。選択値プロパティは、クライアントスクリプトコードの exportValue プロパティに対応します。 フィールド値プロパティと 選択値 プロパティの両方の値が等しい場合、チェックボックスがチェックされているとみなされます。チェックボックスをチェックすると、フィールド値プロパティが 選択値 プロパティと一致するように自動的に設定されます。 したがって、同じ名前の各チェックボックスの 選択値 プロパティに一意の値を割り当てると、一度に 1 つのチェックボックスのみがチェックされます。

たとえば、Fld1 というチェックボックスが 2 つあるとします。 最初は、両方のチェックボックスの フィールド値プロパティが「Off」に設定され、選択値 プロパティが「Yes」に設定されています。 1 つのチェックボックスをチェックすると、そのチェックボックスの フィールド値プロパティが更新され、選択値 プロパティ 「Yes」と一致します。 同じ名前のチェックボックスは Value プロパティを共有するため、もう一方のチェックボックスの フィールド値プロパティも 「Yes」 に設定され、選択値 プロパティと一致します。 その結果、両方のチェックボックスがチェックされます。

ラジオ ボタンのような働きを実現するには、各チェックボックスの 選択値 プロパティの値をそれぞれ 1 と 2 に設定します。この場合は、1 つのチェックボックスをチェックすると、両方のチェックボックスの フィールド値プロパティの値が 1 に設定されます。ただし、フィールド値プロパティの値は最初のチェックボックスに対してのみ、選択値プロパティの値と等価であることに注意してください。そのため、チェックしたチェックボックスのみがチェックされたままになり、他のチェックボックスはチェック解除のままになります。 本動作は、いずれかのチェックボックスをチェックすると、すべてのチェックボックスの フィールド値プロパティの値が、チェックしたチェックボックスの 選択値プロパティの値と等しくなるように設定されるために発生します。各チェックボックスの 選択値プロパティには一意の値が割り当てられているため、残りのチェックボックスの フィールド値プロパティは、それぞれの 選択値の値と一致しません。 その結果、残りのチェックボックスはチェック解除のままになります。

クライアントスクリプトコードを使用して、チェックボックスをチェックまたはチェック解除することもできます。 次のサンプル コードは、チェックボックスをチェックまたはチェック解除する方法を示しています。

// 選択値を「Yes」に設定します。
checkBox.exportValue = "Yes";

// 「フィールド値」 を 「選択値」 と同じに設定して、チェックボックスをチェックします。
checkBox.fieldValue = checkBox.exportValue;
viewer.updateAnnotation(pageIndex, checkBox);


// チェックボックスをチェック解除するには、「フィールド値」を「Off」に設定します。
checkBox.fieldValue = "Off";
viewer.updateAnnotation(pageIndex, checkBox);