(HTML,jQuery)チェックボックスの切り替えによってボタンを変更する

 <body>

<button id="add">追加</button>

<input type="checkbox" id="change">チェックを入れて呼び出すボタンを変える。

<div id="btn"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script language="JavaScript">


   //テーブルに追加

   var on  = '<button>ON</button>'
   var off = '<button>OFF</button>'


   $(document).on("click","#add",function() {

       // もしチェックが入ったら
       if ($('#change').prop('checked')) {

         // ONボタンを出力
         $('#btn').append(on);

       } else {

         $('#btn').append(off);

       }
   });


  // チェックボックスをチェックしたら発動
  $(document).on("change",'#change',function() {

          // もしチェックが入ったら
          if ($(this).prop('checked')) {

            // ボタンをONにする
            $('#btn').html(on);

          } else {

            $('#btn').html(off);

          }
        });

  </script>
  </body>

###前提・実現したいこと

チェックボックスの入っている状態と入っていない状態で別々のボタンを追加し、ボタンが追加された状態でチェックボックスの切り替えを行い、追加したボタンを変更するプログラムを考えております。

###発生している問題・エラーメッセージ

チェックボックスの切り替えで追加するボタンを分けることが出来るが、追加した状態でチェックボックスを切り替えると、追加したボタンが削除されてしまいます。その件に関してですがどのようにすれば解決できそうですか？

###該当のソースコード

$(document).on("change",'#change',function() {

          // もしチェックが入ったら
          if ($(this).prop('checked')) {

            // ボタンをONにする
            $('#btn').html(on);

          } else {

            $('#btn').html(off);

          }
        });

###補足情報(言語/FW/ツール等のバージョンなど)
言語：HTML、Jquery

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

回答2件

仕様がよくわからないのです以下の通りかもしくは違う場合はどうしたいかを
明記ください

追加ボタンを押す度にボタンが増えていく？
チェックボタンを変更しても表示済みのボタンは影響がない？
チェックされている状態で追加するとon、チェックされていない状態で追加するとoff?

投稿2016/11/07 09:07

yambejp

総合スコア114829

yoshim95

2016/11/08 08:36

①追加ボタンを押す度にボタンが増えていく？ →ボタンが増えていく仕様です ②チェックボタンを変更しても表示済みのボタンは影響がない？ →チェックを入れると表示済みのボタンを変更します。 ③チェックされている状態で追加するとon、チェックされていない状態で追加するとoff? →はい、その通りです。

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

ベストアンサー

javascript
1$(document).on("change",'#change',function() {
2
3          // もしチェックが入ったら
4          if ($(this).prop('checked')) {
5
6            // ボタンをONにする
7            //$('#btn').html(on);
8ここにbuttonタグの要素を取得してきて、文字を全てonに置換する処理
9
10          } else {
11
12            //$('#btn').html(off);
13ここにbuttonタグの要素を取得してきて、文字を全てoffに置換する処理
14
15          }
16        });

ですね。

たとえば

javascript
1  $(document).on("change",'#change',function() {
2
3          // もしチェックが入ったら
4          if ($(this).prop('checked')) {
5
6            // ボタンをONにする
7            //$('#btn').html(on);
8            $('button:not(#add)').text('ON');
9          } else {
10
11            //$('#btn').html(off);
12            $('button:not(#add)').text('OFF');
13          }
14        });