如果選中了輸入單選，則更改父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>