<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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/08 08:36