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

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

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

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

jQuery
//ラジオボタン
$(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回目の押下から正しい挙動にするにはどうしたらいいのでしょうか。自分の知識不足だとはおもいますが、調べてもなかなか解決しなかったため、質問させていただきました。