チェックボックスがcheckedのとき、テキストを変更する

Question

###やりたいこと
チェックボックスがcheckedのとき、ラベルのテキスト「変更前」を「変更後」に変えたい

###試したこと
以下にコードを記述しますが、こちらで動きませんでした。

        <div class="label_area">
            <label for="label1" class="change">変更前</label>
        </div>
        <input class="checkbox" type="checkbox" id="label1"/>

$('.checkbox').change(function() {
    
  $('input:checked').each(function() {
      var r = $(this).prop('checked');
      console.log(r);　//trueと表示される
  })
  if(r){
    $('.change').text('変更後');
    console.log('成功');　//何も表示されない
  }
  
})

どこを修正すればやりたいことが実現できますでしょうか。
ご教示お願いいたします。

Answer 1

$(function(){
  $('.checkbox').on('change',function() {
    $('.change').text($(this).prop('checked')?'変更後':'変更前');
  });
});

Comments

[begginer_class]

こちらで再現できました。
とてもスッキリとした内容で書くことができたのでこちらをベストアンサーとさせていただきます。

Answer 2

var r;の位置を変更すると動作しそうです。

$(".checkbox").change(function() {
  var r; //こちらに移動

  $("input:checked").each(function() {
    // var r = $(this).prop("checked");
    r = $(this).prop("checked");
    console.log(r); //trueと表示される
  });
  if (r) {
    $(".change").text("変更後");
    console.log("成功"); //何も表示されない
  }
});