ons-checkboxの状態取得について

monaca上にonsenUIを用いてアプリを開発中です。
以下のHTMLでAppleとBananaどちらが選択されているかを取得するJSはどのように記述すればよいのでしょうか？
<ons-list>
<ons-list-header>くだもの</ons-list-header>
<ons-list-item tappable>
<label class="left">
<ons-checkbox input-id="check-1"></ons-checkbox>
</label>
<label for="check-1" class="center">
Apple
</label>
</ons-list-item>
<ons-list-item tappable>
<label class="left">
<ons-checkbox input-id="check-2"></ons-checkbox>
</label>
<label for="check-2" class="center">
Banana
</label>
</ons-list-item>
</ons-list>

行動規範の内容に同意します

回答1件

ベストアンサー

どちらが・・・っていうことなのでons-checkboxよりはons-radioかなとおもったので、ons-radioでのとり方作ってみました

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
6<link rel="stylesheet" type="text/css" href="https://unpkg.com/onsenui/css/onsenui.css">
7<link rel="stylesheet" type="text/css" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
8
9<script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
10<script>
11function buttonClick() {
12	var _radio = document.getElementsByName('fruit');
13	for(var i = 0; i < _radio.length; i++) {
14//		if(_radio[i].checked && _radio[i].tagName == 'INPUT') { <-こっちのほうが正確かも・・・
15		if(_radio[i].checked) {
16			alert(_radio[i].value);
17			break;
18		}
19	}
20}
21
22</script>
23</head>
24<body>
25	<ons-list>
26		<ons-list-header>くだもの</ons-list-header>
27		<ons-list-item tappable>
28			<label class="left">
29				<ons-radio name="fruit" value="Apple" input-id="radio-1"></ons-checkbox>
30			</label>
31			<label for="radio-1" class="center">
32				Apple
33			</label>
34		</ons-list-item>
35		<ons-list-item tappable>
36			<label class="left">
37				<ons-radio name="fruit" value="Banana" input-id="radio-2"></ons-checkbox>
38			</label>
39			<label for="radio-2" class="center">
40				Banana
41			</label>
42		</ons-list-item>
43		<ons-button onclick="buttonClick()">確認</ons-button>
44	</ons-list>
45</body>
46</html>