ラジオボタン、チェックボックスの値を同時に取得したい

Question

フォームのようなものを作っていて、ラジオボタンの値と、チェックボックスにユーザーがチェックを入れているかボタンを押下時に同時に確認したいです。

<input type="radio" name="hoge"  id="hoge1" value="hoge1">
<label for="hoge1" class="hoge-label"></label>

<input type="radio" name="hoge" id="hoge2" value="hoge2">
<label for="hoge2" class="hoge-label"></label>

<input type="checkbox" name="huga" id="huga" value="huga">
<label for="huga" class="huge-label"></label>

<button type="button" id="btn">ボタン</button>

$(document).on('click', '#btn', () => {
    console.log($('[name=hoge]').val());
    console.log($('[name=huga]').is(':checked'));
});

前提として、トリガーとなっているボタンを押下する前に、ラジオボタンとチェックボックスにはチェックしていたとして、上記のコードを実行すると、コンソールにはundefinedとfalseが出力されてしまいます。
ただ少し触っていると、ラジオボタンとチェックボックスの出力結果は一つ前の値を出力しているということがわかりました。(ラジオボタンの部分で言えば1回目の押下はundefined、2回目以降は前回選択していたvalueが出力される)
これをボタンを押した際に、1回目から選択している値を取るにはどうすればよいのでしょうか。
いろいろ試行錯誤はしているのですが、なかなか解決できないので質問させていただきました。

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#btn').addEventListener('click',()=>{
    var r=document.querySelector('[name=hoge]:checked')?.value;
    console.log(r);
    var c=document.querySelector('[name=huga]:checked')?.value;
    console.log(c);
  });
});
</script>
<input type="radio" name="hoge" value="hoge1">
<input type="radio" name="hoge" value="hoge2">
<input type="checkbox" name="huga" value="huga">
<button type="button" id="btn">ボタン</button>

Answer 2

これをボタンを押した際に、1回目から選択している値を取るにはどうすればよいのでしょうか。

チェックボックスに関しては、提示された動作が再現しません。きちんと現在の状態を取れます。

一方、ラジオボタンはどちらにチェックをつけようとも、常に1つ目の値が取れます。$('[name=hoge]:checked')でチェック済みの方を拾うようにしてはどうでしょうか？

Comments

[maisumakun]

https://jsfiddle.net/47w3bz10/

[odennkunn]

ラジオボタンの部分に関してはそれでできました！
チェックボックスの部分に関しては自分の方でもう少し検証してみようと思います。
ご協力ありがとうございました！