selection.property - フォームの値を確認、変更する

投稿日:2016/03/03 / 更新日:2016/03/03

d3.jsのselection.property()は、ラジオボックスやチェックボックスのチェック状態、テキストエリアの内容など、主にフォーム系要素のプロパティの値を確認したり、変更したりするためのAPIです。

サンプルコード

<input type="checkbox">チェックボックス

// input要素を取得
var selection = d3.select( "input" ) ;

// チェックの状態を確認
var isChecked = selection.property( "checked" ) ;

// チェックの状態を変更
selection.property( "checked", true ) ;

デモ

RUN
HTML
CSS
JavaScript

<p><label><input type="checkbox">チェックボックス</label></p> <ul> <li><a id="method1">チェックされてる？</a></li> <li><a id="method2">チェックの状態を変更</a></li> </ul>

ul { margin: 24px 0 0 ; padding: 0 ; list-style-type: none ; } ul li { margin: 4px 0 0 ; padding: 0 ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; } option { font-size: 16px ; }

// input要素を取得 var selection = d3.select( "input" ) ; // クリックイベント1 document.getElementById( "method1" ).onclick = function() { // チェックの状態を確認 var isChecked = selection.property( "checked" ) ; // 自身のテキストに反映 this.textContent = "チェックされてる？→" + isChecked ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // 現在と反対の状態に変更する var doChecked = selection.property( "checked" ) ? false : true ; // チェックの状態を変更 selection.property( "checked", doChecked ) ; }

構文

value || selection = selection.property( object || name [, value || function ] )

引数
項目	説明
name	対象となる、プロパティ名を指定する。チェックボックスやラジオボタンの場合は`checked`、セレクトフォームの場合は`selected`、インプットフォームやテキストエリアの場合は`value`となります。
value	省略可。第2引数には、第1引数で指定したプロパティに新しくセットしたい値を指定する。チェックボックスやラジオボタンにおける、チェックの場合は`true`がチェックする、`false`がチェックを外す、となる。
function	第2引数に指定する値を、関数にすることもできる。ここで指定した関数は、第1引数に要素に関連付けられたデータ、第2引数にインデックス番号をとる。また、`this`で要素を参照できる。戻り値が値として設定される。
object	複数のプロパティを一括で変更するには、第1引数にオブジェクトリテラルを指定する。例えば、`{ "hoge1": true, "hoge2": false }`というように指定する。利用するシーンが思い浮かびませんでした。

戻り値
項目	説明
value	引数を1つだけ指定した場合は、そのプロパティの状態を表す値が戻り値となる。
selection	引数を2つ指定してプロパティの状態を変更した場合、d3.selectionオブジェクトが戻り値となる。

ノート

1つなら確認: 引数を1つ指定するとプロパティに設定されてる値の確認となる。
2つなら変更: 引数を2つ指定するとプロパティの状態を変更する。
一括ならオブジェクト: 複数のプロパティの状態を一括で変更するには、オブジェクトリテラルで値を指定する。