如果选中输入无线电，​​则更改父div

Question

我有3个无线电输入，用div包裹，使它们看起来像按钮而不是默认的无线电圆输入，点击我更换按钮文本以查看图标。现在验证是否失败我返回旧值，并且如果检查了无线电输入，我想再次替换按钮的文本以检查图标。

这是点击操作的脚本：

$('.Image-input__input-wrapper').click(function() {
      $( '.plan-text-icon-toggle' ).replaceWith( '<span class="plan-text-icon-toggle">This is what I need</span>' )
      $(this).find( '.plan-text-icon-toggle' ).replaceWith( '<span class="plan-text-icon-toggle"><i class="ion-checkmark-round"></i></span>' );
  });

这是html：

<div class="Image-input__input-wrapper">
    <span class="plan-text-icon-toggle">This is what I need</span>
    <input class="Image-input__input" type="radio" name="plan" value="player" {{ old('plan')=="player" ? 'checked='.'"'.'checked'.'"' : '' }}>
</div>

现在我想在页面加载时做同样的事情，如果已经选中了按钮，但不知道怎么做？

更新 我尝试在答案中修改建议：

    function checkinput(elem) {
    var parent = elem.parent(), 
        checked = elem.is(':checked');

    $('.radio').removeClass('active').html('This is what I need');

    if (checked) {
        parent.addClass('active').html('Checked');
    }
}

// apply style on change
$('[type=radio]').on('change', function () {
    var elem = $(this);
    checkinput(elem);
});

// apply style on load
var elem = $('[type=radio]:checked');
checkinput(elem);

Here就是一个完整的例子。但它没有用。