ionicアプリでAngularJSチェックボックスから値を読み込む
時系列
問題：
値を取得できない
できていなかったこと
１：type=submitのボタンをフォームタグで囲っていなかった
２：渡したい値の定義方法が違った
contact.UIDではなくcontact.contactUID
ー
問題：デバッグのために選択した値を値をconsole.logで表示する
1: [object Object] や空欄が表示される
2: How can I display a JavaScript object? - Stack Overflow
すると意味不明な文字列("entire object"オブジェクト全体)がプリントされるが
その中に checkboxで指定しているvalueがない
on; 1: on; length: 2; prevObject: [object Object]; jquery: 3.1.0; constructor: function (a,b){return new r.fn.init(a,b)}; toArray: function (){return f.call(this)}; get: function (a){return null!=a?a<0?this[a+this.length]:this[a]:f.call(this)}; pushStack: function などと続いている
3: jQueryでチェックボックスのチェック済みの値のみを取得 - MasKのpermission denied.
on,onと表示される
解決
ion-checkboxではなくてinput style="checkbox" としたら洗濯した値がvalue=""の中身となった。
tocheck
Ionic/AngularJS checkbox and ng-repeat from API - Stack Overflow
javascript - How to bind to list of checkbox values with AngularJS? - Stack Overflow
【jQuery】チェックされたチェックボックスを取得する - Qiita
ちょいちょいわからなくなるcheckbox, radio, selectboxの値の取り方 - Qiita
メモ：
jQueryは値の取得は先頭のものだけが対象になるのが普通で、 .val()もそう。
全部取るために、 .map()でループします。
1 |
<form id="my-form"> |
2 |
<input type="checkbox" name="my-checkbox" value="A" /> |
3 |
<input type="checkbox" name="my-checkbox" value="B" checked /> |
4 |
<input type="checkbox" name="my-checkbox" value="C" checked /> |
5 |
</form> |
1 |
var $checked = $('#my-form [name=my-checkbox]:checked'); |
2 |
var valList = $checked.map(function(index, el) { return $(this).val(); }); |
3 |
console.log(valList); // => ["B", "C"] |
複数あるかもなので、値も配列に詰めてます。
あ、 .map()の使い方は解説しないので、わからない人は探してみてくださいね。
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
var checkedSeasons = []; $('[name="seasons"]:checked').each(function(){ checkedSeasons.push($(this).val()); });http://codenote.net/javascript/jquery/2250.html |
[jQuery] チェック済みの checkbox の値を取得して配列へ格納する方法 | CodeNote.net
フォームの中でない場合：
console.log
アプトプットが[object Object]になってしまうときの対処除法
