ラジオボタンやチェックボックスの値が正確に取得できない

Question

現在簡単なフォームのようなものを作っています。そこでユーザーが選択したラジオボタンの値やチェックボックスにチェックが入っているかどうかをjQueryでしゅとくしようとしているのですが、思うような挙動にならずに困っています。

ラジオボタンもチェックボックスもCSSでデフォルトの見た目を変えるため、inputにはdisplay: none;を使いlabelの疑似要素でチェックボックスやラジオボタンを表示しているような状態です。

<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>

//ラジオボタン
$(document).on('click', '.hoge-label', () => {
    var hoge =  $('[name=hoge]').val();
    console.log(hoge);
    console.log($('[name=huga]').is(':checked'));
});

//チェックボックス
$(document).on('click', '.huga-label', () => {
    var huga =  $('[name=huga]').is(':checked');
    console.log(huge);
    console.log($('[name=hoge]').val());
});

このようにした時に、自分の想定では、ラジオボタンを押した時に、コンソールには押した方のvalueが出力され、チェックボックスを押した際には、trueが表示されると思っていたのですが、実際にはラジオボタンの方は1回目の押下時にはundefined、checkboxの方はfalseが出力されます。
また2度目の押下時にはラジオボタンの方は前回押下したボタンのvalueが出力され、チェックボックスも前回の押下した結果（2回目の押下した結果はtrue)が出力されます。 要は前回の結果が出力されるという感じです。
これを1回目の押下から正しい挙動にするにはどうしたらいいのでしょうか。自分の知識不足だとはおもいますが、調べてもなかなか解決しなかったため、質問させていただきました。

Comments

[maisumakun]

「2度目の押下以降に関しては前回の結果が出力されるという感じです。」とありますが、1度目も「前回の結果」（ラジオボタンは何も選択されていない、チェックボックスは未チェック）が取得されるので、その意味では一貫しています。

Answer 1

まず、HTMLが正しくありません。
<label>
labelタグは閉じましょう。

仮：

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

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

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

あとは「クリックした要素の配下のチェックボックス」を指定しましょう。
Event.currentTargetで「イベントが発生した自身」が取れます。

こんな感じで。

$(document).on('click', '.hoge-label', (e) => {
    console.log($(e.currentTarget).find('[type="radio"]').val());
});

Comments

[odennkunn]

ご回答ありがとうございます。
その方法であれば確かに想定通りの値が出力できました。
ただラジオボタンを押下したに、チェックボックスの状態取りたいと思うのですが、その質問はまた別の質問にさせていただきます