Ändern Sie Eltern div, wenn Radioeingabe aktiviert ist

Question

Ich habe 3 Radioeingänge, die in div so eingewickelt sind, dass sie wie Knöpfe anstelle der Standardradio-Kreiseingabe aussehen, auf Klick ersetze ich den Knopftext für überprüftes Symbol. Wenn die Validierung nun fehlschlägt, gebe ich den alten Wert zurück und möchte den Text der Schaltfläche für das Symbol, das überprüft wurde, wenn die Funkeingabe überprüft wurde, erneut ersetzen.

Dies ist das Skript für die Klick-Aktion:

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

Dies ist der 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> 

Jetzt würde ich beim Laden der Seite zu tun gleichen wie wenn die Taste bereits aktiviert wurde , aber nicht sicher, wie es geht?

aktualisiert Ich habe mit Anpassung des Vorschlags in den Antworten versucht:

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 ist das volle Beispiel. Aber es funktioniert nicht.

Answer 1

Sie können immer Eingang Radio verwenden und ändern Sie einfach den Stil mit CSS. Sehen Sie das Beispiel unten:

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>