ボタンクリック時に実行の確認ウィンドウを表示したい

###やりたいこと
元々はボタンを二つ並べていたのですが、今回スライド式のボタンに変更したいという案件です。

以下のスライド式オンオフのボタンをクリックした際（ON/OFFにしたい時）に、ON/OFFの実行の確認ポップアップウィンドウを出すようにしたいです。スライドの動きはCSSのみで設定しています。
参考画像の文言は却下しますか？になってますが、実際には「ON（もしくはOFF）にしますか？」と表記したい。

html
1<input id="flag" type="checkbox" class="tgl tgl-flat">
2<label data-tg-off="OFF" data-tg-on="ON" for="flag" class="tgl-btn"></label>

###ボタン2つ並び時代のコード
元々は2つのボタンを表示していましたので、以下のような感じで2回記述して各ボタンにあてていました。しかし今回上記のようなスライド式にデザインの変更（ボタンをひとつにまとめる）を求められたため、<script>部分をどのように修正すればいいのかわからず質問している次第です。

<button class="xxx" onclick="MoveCheckRejected();">ON</button>
<script>
  function MoveCheckRejected() {
    var options = {
        title: "ONにしますか？",
        buttons: {
            cancel: "Cancel",
            ok: true
        }
    };
    swal(options)
        .then(function(val) {
            if (val) {
                window.location.href = "http://localhost/kanri/apply/rejected/135";
            } else {
                swal({
                    text: "ONにしました",
                    buttons: false,
                    timer: 1000 // 1秒後に自動的に閉じる
                });
            }
        });
  }
</script>

###追記
今回新しく記述したのは最初のHTMLの部分だけで（これも他ページの記述を参考）、他は前任者から引き継いだものになり把握しきっていない部分も多々ありますが、とにかく、クリック時にオンにするかオフにするかの確認をするポップアップウィンドウを出したいです。必要であれば全て書き直すこともしますので、どうぞよろしくお願い致します。

css
1.tgl {
2    display: none;
3}
4
5.tgl + .tgl-btn {
6    box-sizing: border-box;
7}
8
9.tgl + .tgl-btn {
10    outline: 0;
11    display: block;
12    width: 8em;
13    height: 2em;
14    position: relative;
15    cursor: pointer;
16    -webkit-user-select: none;
17    -moz-user-select: none;
18    -ms-user-select: none;
19    user-select: none;
20}
21
22.tgl + .tgl-btn:after,
23.tgl + .tgl-btn:before {
24    position: absolute;
25    display: block;
26    content: "";
27    width: 50%;
28    height: 100%;
29    top: 0;
30}
31
32.tgl + .tgl-btn:after {
33    content: attr(data-tg-off);
34}
35
36.tgl + .tgl-btn:before {
37    content: attr(data-tg-on);
38}
39
40.tgl + .tgl-btn:after {
41    left: 0;
42}
43
44.tgl:checked + .tgl-btn:after {
45    left: 50%;
46}
47
48.tgl:checked + .tgl-btn:after {
49    left: 50%;
50    content: attr(data-tg-on);
51}
52
53.tgl-flat:checked + .tgl-btn:after {
54    left: 50%;
55    background: #cfcfcf;
56    content: attr(data-tg-off);
57}
58
59.tgl-flat + .tgl-btn {
60    padding: 0;
61    transition: all .2s ease;
62    background: #fff;
63    border: 1px solid #f3f3f3;
64    border-radius: 2em;
65    color: #ffffff;
66    font-size: 1.2rem;
67    line-height: 2em;
68    text-align: center;
69}
70
71.tgl-flat + .tgl-btn:after {
72    transition: all .2s ease;
73    background: #8accff;
74    content: "";
75    border-radius: 1em;
76    content: attr(data-tg-on);
77}
78
79.tgl-flat + .tgl-btn:after {
80    content: attr(data-tg-on);
81}

##追記-現状（11.01時点）
x_xさんに教えていただいたもので以下の通り記述したのですがポップアップされず、
何が間違っているかも分からない状態です。

<input id="flag" type="checkbox" class="tgl tgl-flat">
<label data-tg-off="OFF" data-tg-on="ON" for="flag" class="tgl-btn"></label>
<script>
    document.querySelector('#flag').addEventListener('change', function(event) {
        var target = event.target;
        var checked = target.checked;
        var options = {
            title: (checked ? 'OFF' : 'ON') + "にしますか？",
            buttons: {
                cancel: "Cancel",
                ok: true
            }
        };
        swal(options)
            .then(function(val) {
                if (val === null) {
                    target.checked = !checked;
                }
            });
    }, false);
</script>

よろしくお願い致します。

yambejp

2019/10/31 07:25

スライド式ボタンはなにかライブラリを利用して実現していますか？

crigw

2019/10/31 08:27 編集

HTML/CSSだけで実現していることを確認しました！

AkitoshiManabe

2019/10/31 08:34

swal 関数の中身ってどんな風だろう？と思いました。.then() にチェーンしてるので Promise が返ってきてるくらいしか分からないです。質問に示されても「ブラックボックス」ですねぇ。

crigw

2019/10/31 08:45

既存の記述は完全に無視してよくて、新しいデザインで確認ポップアップウィンドウの表示をしたいです。

yambejp

2019/10/31 08:46

CSSでスライド処理をしているならCSSも例示してください

crigw

2019/10/31 08:59

CSSの追記をしました

AkitoshiManabe

2019/10/31 09:33

先程のswal関数について、現状のままで試せることが残ってますよ。１）今もPOPアップしてるのか？２）もししているなら、javascriptの"ONにしますか？"を"onにしますか？"のように小文字にしただけの無難な内容に書き換えて試行したか？３）試行できたならその結果は？１）~３）の結果で、swal() == POPアップ関数と把握できるはずです（流用も可能）。コードを示せなくても、上記のような機能面は示せると思います。加えるて曖昧な要件について。スライド式→ボタン式ですか？それともボタン式→スライド式ですか？

crigw

2019/10/31 09:44

デザイン変更に伴い記述が一つにまとまったために現状のものがうんともすんともいわなくなったようです。明確な表記をしておらず申し訳ございませんでした、ボタン式→スライド式です。

AkitoshiManabe

2019/10/31 11:44

POPアップ機能は x_x さんが回答済みですね。スライド表示は「ON/OFFスイッチ CSS」の2語で検索すると幸せになれるかもしれません。

crigw

2019/11/01 01:02

スライド表示は質問開始時点で実装済みで、ポップアップ機能のみ分からずの質問でした。わかりにくく申し訳ございません。

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

回答1件

ベストアンサー

SweetAlert を使っているのであれば、キャンセル時に null が入るらしいので
https://sweetalert.js.org/guides/#using-promises

JavaScript
1document.querySelector('#flag').addEventListener('change', function(event) {
2    var target = event.target;
3    var checked = target.checked;
4    var options = {
5        title: (checked ? 'OFF' : 'ON') + "にしますか？",
6        buttons: {
7            cancel: "Cancel",
8            ok: true
9        }
10    };
11    swal(options)
12        .then(function(val) {
13            if (val === null) {
14                target.checked = !checked;
15            }
16        });
17}, false);