【jQuery】ラジオボタンで2クリックしたら戻す処理を共通化する

2クリックで戻すには、前のデータと比べて同じだったらチェックを外す処理をしないといけないのです

ついでに、ラジオのデザイン変えるためにごちゃごちゃやってます。

let radioVal = {};
let radioOnClick = function (query) {
  $(query).on("click", function () {
    // 前回と値が同じだった場合にチェックを外す
    if (radioVal[$(this).attr("name")] == $(this).val()) {
      $(this).prop("checked", false);
    }

    // デザインを変えたかったので、チェックを変えた場合に、処理を行います。
    for (var elem of $(query)) {
      var id = $(elem).attr("id");
      var label = $('label[for="' + id + '"]').find("i");
      if ($(elem).prop("checked")) {
        // チェックされている値に行う処理
        label.removeClass("far");
        label.addClass("fas");
      } else {
        // チェックされているていない値に行う処理
        label.removeClass("fas");
        label.addClass("far");
      }
    }
    // 値の保存
    radioVal[$(this).attr("name")] = $(query).filter(":checked").val();
  });
};

// 登録
radioOnClick('input[name="hoge"]:radio');
radioOnClick('input[name="hoge2"]:radio');
<input type="radio" name="hoge" value="1">
<input type="radio" name="hoge" value="2">

valueちゃんと設定してね

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です