ons-switchの使い方

###前提・実現したいこと
Monaca Cloud IDEにてプログラミングの勉強をしています。

本題ですが、ons-switchがonの時画面上にて"オン"と表示させ、offの時は"オフ"と表示させたいです。
ons-switchのメソッド isCheckedを使ってPタグの内容を変更しようと”monaca公式ガイドブック HTML５ハイブリッドアプリ開発”を参考にやってみましたが、上手くいきませんでした。

Onsen UIのリファレンス等も確認しましたがよく分かりませんでした。
ご教授お願いします。

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

回答3件

おそらくですが「switch」という名前が基本コンポーネント(onsen ui)の中でバッティングしてます。
id=switchではダメですが、id=MySwitchにするとisChecked()が正常にBool値を返します。

javascript
1// js
2document.getElementById('kekka').innerHTML = MySwitch.isChecked() ? '有効' : '無効';
3
4// html
5<ons-switch id="MySwitch"></ons-switch>
6

投稿2016/11/20 18:11

編集2016/11/20 18:16

fromageblanc

総合スコア2724

fromageblanc

2016/11/20 18:28

↑はpinpikokunさんが上げたソースを質問者さんが上げたものだと勘違いして回答してしまいました。すいません。

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

ベストアンサー

以下のような感じでしょうか

サンプルリンク

html
1<html>
2 <head>
3    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
4    <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/js/onsenui.min.js"></script>
5    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/css/onsenui.min.css" />   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-alpha.15/css/onsen-css-components.min.css" />
6    <script>
7
8      $(function(){
9        document.getElementById('switch').addEventListener('change', function(e) {
10          document.getElementById('kekka').innerHTML = e.target.checked ? '有効' : '無効';
11        });
12      });
13     
14   </script>
15 </head>
16 <body>
17  <ons-page>
18    <ons-toolbar>
19      <div class="center">Home</div>
20    </ons-toolbar>
21    <br>
22    <div style="text-align: center">
23      <ons-switch id="switch"></ons-switch>
24    </div>
25    <br>
26    <div style="text-align: center">
27      <p id="kekka">結果を表示</p>
28    </div>
29  </ons-page>
30 </body>
31</html>