更改父格輸入無線電檢查

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是完整的例子。但它不起作用。

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>