jQuery clickでaddClass もう一度クリックでremoveClassしたい。

input radioクリックでクリックでcssクラスが追加され、もう一度クリックでcssクラスが削除される。仕様を実現したいです。

以下のコードでは、input radioクリックでクラス（'radio-active'）を追加、他のinput radioクリックでそのクリックしたinput radioにクラスが追加されます。

これを
input radioクリックでクラス（'radio-active'）を追加
同じinput radioクリックでクラス（'radio-active'）を外す。
機能も追加したいです。

jQuery
1$(function () {
2  $('.search-condition-time__duration').on('click', function () {
3    $('.search-condition-time__duration').removeClass('radio-active'); //一旦すべて削除
4      $(this).addClass('radio-active'); //クリックされたものだけセット
5      $('.search-condition-time-wrap__input').prop('value', false);
6
7  });
8});

HTML
1<input class="search-condition-time__radio" id="week" type="radio" name="kikan_shitei" value="#7日間">
2<label class="search-condition-time__duration" for="week">#7日間</label>
3<input class="search-condition-time__radio" id="this_month" type="radio" name="kikan_shitei" value="#今月">
4<label class="search-condition-time__duration" for="this_month">#今月</label>
5<input class="search-condition-time__radio" id="last_month" type="radio" name="kikan_shitei" value="#先月">
6<label class="search-condition-time__duration" for="last_month">#先月</label>

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

回答3件

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6</head>
7<body>
8<form action="">
9    <input class="search-condition-time__radio" id="week" type="radio" name="kikan_shitei" value="#7日間">
10    <label class="search-condition-time__duration" for="week">#7日間</label>
11    <input class="search-condition-time__radio" id="this_month" type="radio" name="kikan_shitei" value="#今月">
12    <label class="search-condition-time__duration" for="this_month">#今月</label>
13    <input class="search-condition-time__radio" id="last_month" type="radio" name="kikan_shitei" value="#先月">
14    <label class="search-condition-time__duration" for="last_month">#先月</label>
15</form>
16<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
17<script>
18    $(function () {
19        $('.search-condition-time__duration').on('click', function () {
20            let isActive = $(this).hasClass('radio-active');
21            $('.search-condition-time__duration').removeClass('radio-active');
22            if (!isActive) {
23                $(this).addClass('radio-active');
24            }
25        });
26    });
27</script>
28</body>
29</html>

投稿2022/08/25 02:20

phper.k

総合スコア3923

Fukusuke0604

2022/08/25 02:31

ありがとうございます。頂いたコードでも意図した挙動実現できました!!

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

クリックされたもの以外のクラスを削除して、
クリックされたものは toggleClass でクラスがあれば削除、なければ追加すればいいでしょう。

JavaScript/JQuery
1$(function () {
2  $('.search-condition-time__duration').on('click', function () {
3    $('.search-condition-time__duration').not($(this)).removeClass('radio-active'); //クリックされたもの以外からクラス削除
4      $(this).toggleClass('radio-active'); //クリックされたもののクラスの有無を切替
5      $('.search-condition-time-wrap__input').prop('value', false);
6  });
7});

ちょっと気になったのは、ラベルのクリック時で処理しているので、ラジオボタンを直接クリックしたときは反応しないですが、それでいいのですか。ラジオボタンを非表示にしていてクリックできないのなら問題ないですが。

追記

解決済みですが、
ラジオボタン、ラベルどちらをクリックしても反応する。
チェック済みのラジオボタンをクリックしたときは、チェックを外す。

上記の仕様を実装したコード例です。

JavaScript/JQuery
1$(function () {
2  $('.search-condition-time__radio').on('click', function () {
3    $('.search-condition-time__duration').not($(this).next()).removeClass('radio-active'); //クリックされたラベル以外からクラス削除
4    $(this).next().toggleClass('radio-active'); //クリックされたラベルのクラスの有無を切替
5    if(!$(this).next().hasClass('radio-active')){$(this).prop('checked', false);};
6    $('.search-condition-time-wrap__input').prop('value', false);
7  });
8});

CodePen サンプル

投稿2022/08/25 02:29

編集2022/08/25 03:02

hatena19

総合スコア33715

ベストアンサー

クリックイベント直後に「radio-active」が付与されているかを確認して、付与されていなかった場合に「アクティブに変更」部分を動作させるのはどうでしょうか。

javascript
1$(function () {
2  $('.search-condition-time__duration').on('click', function () {
3
4      const active = $(this).attr('class').indexOf('radio-active') >= 0; // クリックされたエレメントに「radio-active」が設定されているかをチェック
5
6      $('.search-condition-time__duration').removeClass('radio-active'); //一旦すべて削除
7
8      if (!active) // 現状、アクティブでない場合
9          $(this).addClass('radio-active'); //アクティブに変更
10
11      $('.search-condition-time-wrap__input').prop('value', false);
12
13  });
14});

投稿2022/08/25 02:00

編集2022/08/25 02:00

Matsumon0104

総合スコア1005

Fukusuke0604

2022/08/25 02:21

こめんとありがとうございます。頂いたコードで意図した挙動になりました。しかし、追加したCSSの削除と同時にradio inputの'checked',をfalseにできません。。。 $(function () { $('.search-condition-time__duration').on('click', function () { const active = $(this).attr('class').indexOf('radio-active') >= 0; // クリックされたエレメントに「radio-active」が設定されているかをチェック $('.search-condition-time__duration').removeClass('radio-active'); //一旦すべて削除 if (!active) // 現状、アクティブでない場合 $(this).addClass('radio-active'); //アクティブに変更 $('.search-condition-time-wrap__input').prop('value', false); //radio checkedをfalseに。 $('.search-condition-time__radio').prop('checked', false); }); }); 上記のように、頂いたコードに以下を追加すればいけると思ったのですが、、、だめでした。。。 //radio checkedをfalseに。 $('.search-condition-time__radio').prop('checked', false);

Fukusuke0604

2022/08/25 02:30

ブサイクかもしれませんが、別のスクリプトを書いてradioボタンのon off 実装しました。 let number; $(function(){ number = $('.search-condition-time__radio:checked').val(); $('.search-condition-time__radio').click(function(){ if($(this).val() == number) { $(this).prop('checked', false); number = 0; } else { number = $(this).val(); } }); });