如果选中了输入单选，则更改父div

Question

I have 3 radio inputs, that are wrapped in div so that they look like buttons instead of the default radio circle input, on click I am replacing the button text for checked icon. Now on validation if it fails I am returning the old value, and would like to again replace the text of the button for icon checked if the radio input was checked.

This is the script for the click action:

$('.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>' );
  });

This is the 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>

Now I would like to to do same for on page load if the button was checked already, but not sure how to do it?

Update I have tried with adapting the suggestion in the answers:

    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 is the full example. But it is not working.

Answer 1

You can always use input radio and just change the style with CSS. Look the example bellow:

 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>