Javascript 如果选中输入收音机，则更改父div

我有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>' );
  });

---

这是一个完整的例子。但它不起作用。

您可以随时使用输入收音机，只需使用CSS更改样式即可。请看下面的示例：

功能检查输入（elem）{
var parent=elem.parent（），
选中=元素为（“：选中”）；
$（'.radio'）.removeClass（'active'）；
如果（选中）{
parent.addClass（'active'）；
}
}
//更改时应用样式
$（'[type=radio]'）。在（'change'，函数（）{
var elem=$（本）；
检查输入（elem）；
});
//加载时应用样式
var elem=$（'[type=radio]：选中'）；
检查输入（elem）
.radio.on{
显示：无；
}
.收音机.启动.关闭{
显示：无；
}
.收音机.启动.接通{
显示：内联；
}

选中时显示消息
未选中时的消息
选中时显示消息
未选中时的消息
选中时显示消息
未选中时的消息
您可以始终使用输入收音机，只需使用CSS更改样式即可。请看下面的示例：


功能检查输入（elem）{
var parent=elem.parent（），
选中=元素为（“：选中”）；
$（'.radio'）.removeClass（'active'）；
如果（选中）{
parent.addClass（'active'）；
}
}
//更改时应用样式
$（'[type=radio]'）。在（'change'，函数（）{
var elem=$（本）；
检查输入（elem）；
});
//加载时应用样式
var elem=$（'[type=radio]：选中'）；
检查输入（elem）
.radio.on{
显示：无；
}
.收音机.启动.关闭{
显示：无；
}
.收音机.启动.接通{
显示：内联；
}

选中时显示消息
未选中时的消息
选中时显示消息
未选中时的消息
选中时显示消息
未选中时的消息
一个更简单的选择是使用css类并根据类显示/隐藏，而不是替换HTML的内容。一个更简单的选择是使用css类并根据类显示/隐藏，而不是替换HTML的内容。是的，但我应该检查页面加载，而不是输入更改，我已经用我的脚本做了，我已经改变了这个例子。但是我该如何在我的例子中做到这一点，因为我的按钮中也有文本，而且还需要改变它，而不仅仅是类？我已经尝试过改变你的答案，但它不起作用。再次运行被剪断的部分。js逻辑仍然相同，但我已经更改了HTML/CSS以显示/隐藏消息。是的，但我应该检查页面加载，而不是输入更改，我已经用我的脚本这样做了。我已经更改了示例。但是在我的示例中，我该如何做呢，因为我的按钮中也有文本，并且也需要更改，不仅仅是课堂？我试着改变你的答案，但它不起作用。再次运行被剪断的部分。js逻辑仍然相同，但我已经更改了HTML/CSS以显示/隐藏消息。
<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);