如果选中了输入单选，则更改父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);

这是完整的示例。 但这是行不通的。

Answer 1

您始终可以使用输入单选按钮，而只需使用CSS更改样式即可。 看下面的例子：

 function checkinput(elem) { var parent = elem.parent(), checked = elem.is(':checked'); $('.radio').removeClass('active'); if (checked) { parent.addClass('active'); } } // 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); 

 .radio .on { display: none; } .radio.active .off { display: none; } .radio.active .on { display: inline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <label class="radio"> <span class="on">Message when checked</span> <span class="off">Message when unchecked</span> <input type="radio" name="my-radio" value="1"> </label> </div> <div> <label class="radio"> <span class="on">Message when checked</span> <span class="off">Message when unchecked</span> <input type="radio" name="my-radio" value="2"> </label> </div> <div> <label class="radio"> <span class="on">Message when checked</span> <span class="off">Message when unchecked</span> <input type="radio" name="my-radio" value="3" checked> </label> </div>