ラジオボタンのチェックを外したい

Question

bootstrap4を使用しています。
buttonを押すと、ラジオボタンのチェックを外すというjQueryの処理が思い通りにならず困っております。
どなかた、お知恵をお借りしたいです。

<table>
  <tr><td>１行目</td>
    <td><input type="button" value="clear" class="row_clear"></td>
    <td><input type="text"></td>
    <td>
      <div class="row"><div class="col-auto">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-outline-primary"><input value="1" type="radio" />AA</label>
          <label class="btn btn-outline-primary"><input value="2" type="radio" />BB</label>
        </div>
      </div></div>
    </td>
  </tr>
  <tr><td>２行目</td>
    <td><input type="button" value="clear" class="row_clear"></td>
    <td><input type="text"></td>
    <td>
      <div class="row"><div class="col-auto">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-outline-primary"><input value="1" type="radio" />AA</label>
          <label class="btn btn-outline-primary"><input value="2" type="radio" />BB</label>
        </div>
      </div></div>
    </td>
  </tr>
</table>

テーブルの各行にテキストボックスとラジオボタンを配置しています。（行は動的です）
clearボタン押下時に以下のjQueryでテキストボックスの値とラジオボタンの選択をクリアしたいと思っています。

// テーブル行値クリア
$(document).on('click', '.row_clear', function () {
  $(this).closest('tr').find('[type=text]').val('');

  $(this).closest('tr').find('[type=radio]').removeAttr('checked');  //★１
  $(this).closest('tr').find('[type=radio]').prop("checked", false); //★２
});

テキストボックスの値はクリアされるのですが、ラジオボタンのチェックが外れなくて困っています。
★１でも★２でも動作しませんでした。
どこが誤っているのかアドバイスをいただきたいです。

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

Answer 1

bootstrap4を使用とのことなのでラジオボタンを選択した際にラジオボタンを囲んでいるlabelにactiveクラスが付与されていると思われます。
これはBootstrapのほうで付与されているのでラジオボタンのみクリアしても値は選択されていないがlabelのactiveが残ったままなので見た目は選択されているような状態になります。

クリアボタンを押したときに該当のlabelのactiveクラスも消しましょう。

Comments

[ryu_k]

ご回答いただきありがとうございます。私がソースと格闘している間に、回答をいただいているのを見逃しておりました。まさにご指摘の内容でした。ありがとうございました！

Answer 2

★１はあまり意味がないかも
普通に動きますので、jQueryのバージョンが古いだけかも

Comments

[yambejp]

jsだけでやるなら
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('.row_clear').forEach(x=>{
x.addEventListener('click',()=>{
x.closest('tr').querySelectorAll(':checked').forEach(x=>{
x.checked=false;
});
x.closest('tr').querySelectorAll('[type=text]').forEach(x=>{
x.value="";
});
});
});
});

[ryu_k]

ご回答ありがとうございます。jqueryは3.5.1を使用しています。
以下を試してみましたが、やはり動作しませんでした。。。

var result = $(this).closest('tr').find('[type=radio]')
console.log(result[0].checked);
console.log(result[1].checked);
→それぞれ選択されている状態が取得できました。
→このあと、以下を実施しても画面に反映されない状態です。。。
result[0].checked = false;
result[1].checked = false;
→まだ、選択状態が残っています。上記実行後値を取得すると、
false、false
になってくれてはいるのですが・・・画面リフレッシュとか必要なのでしょうか。

[yambejp]

実はチェックボックスをカスタマイズして
なんらかの疑似表示をさせているとかありませんか？

[ryu_k]

ありがとうございます。
試しにbootstrapのトグルボタンをやめて、ただのradioで実施してみたら、しっかり外れてくれました。
トグルボタン側を何とかしないといけないのですね・・・もう少し調べてみます。。。

[ryu_k]

解決しました。ありがとうございます！
radioボタンを選択したときに、<input type=radio>の方ではなく、
<label class="btn btn-outline-primary">に"active"が追加されていてました。
このクラスをremoveすると、選択解除されました。
本当に助かりました。ありがとうございました。

[yambejp]

いや、私は的はずれな回答でしただけなので、
gogoweb_ikedaさんにBAつけてあげてください

[ryu_k]

yambejpさん、ありがとうございました。gogoweb_ikedaさんにベストアンサーをつけさせていただきました。yambejpさんの回答はとてもヒントになりました！

Answer 3

張られたソースコードで検証したところ、★2 は動作しました。
（IE11、Chrome 84 にて確認）

ソースコードは正しそうですが、
Ctrl + F5 で再読み込みしても動かないでしょうか。

Comments

[ryu_k]

ご回答ありがとうございます。
試してみたのですが、動作しませんでした。私の環境が悪いのかもしれません・・・