1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

knockout.jsAdvent Calendar 2015

Day 12

[小ネタ] knockout.jsでラジオボタンのモデルの値に真偽値を使う

Posted at

knockout.jsで真偽値を入力させる場合はチェックボックスを使うのが最も簡単ですが、「はい/いいえ」みたいに明示的に「いいえ」を指定させたい場合があります。このような場合はラジオボタンを使って以下の様にすることになります。

<label><input type="radio" name="question" value="1" data-bind="checked: question" />はい</label>
<label><input type="radio" name="question" value="0" data-bind="checked: question" />いいえ</label>

value属性にビューモデルに設定される値を指定するわけですが、この値は文字列なので、ビューモデルに設定される値も文字列になります。普通にPOSTしてサーバに送信する場合はサーバが真偽値として解釈してくれる文字列を指定すればいいのですが、JSON形式で送信しようとした時に困ります。真偽値を期待しているところに文字列が送られてしまうのでエラーにされるかもしれません。

こんな時に使えるのがcheckedValueパラメータです。選択された時の値を指定することができるので、truefalseを指定してあげればビューモデルに真偽値が設定されるようになります。

<label><input type="radio" name="question" data-bind="checked: question, checkedValue: true" />はい</label>
<label><input type="radio" name="question" data-bind="checked: question, checkedValue: false" />いいえ</label>

参考:
http://knockoutjs.com/documentation/checked-binding.html#checkedValue

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?