在选择单选按钮时更改单选按钮的标签

Question

我想在选择单选按钮后更改单选按钮文本，例如， 如果选择了第一个单选按钮，则文本应从 Checkout as a guest 更改为 Checkout as a guest --> Please Press continue。

如果他们选择第二个单选按钮，则文本应从 Register an account 更改为 Register an account --> Please Press Continue

<div class="PL40" style="line-height: 2;">
    <dl>
        <dd>
            <label>
                <div class="radio" id="uniform-checkout_type_guest">
                    <span class="">
                        <input name="checkout_type" id="checkout_type_guest" value="guest" type="radio" onclick="$('#BillingDetailsLabel').html('Billing Details');">
                    </span>
                </div>
                Checkout as a guest
            </label>
        </dd>
        <dd>
            <label>
                <div class="radio" id="uniform-checkout_type_register">
                    <span class="checked">
                        <input name="checkout_type" id="checkout_type_register" value="register" checked="checked" type="radio" onclick="$('#BillingDetailsLabel').html('Billing &amp; Account Details');">
                    </span>
                </div>
                Register an account
            </label>
        </dd>
        <dd class="Submit mt10 mb10">
            <input type="submit" id="CreateAccountButton" value="Continue" class="btn"> 
            <span class="LoadingIndicator" style="display: none">
                <img src="https://cdn6.bigcommerce.com/r-b99d97b0aae9cde0306565d8de6f047a25afdd8a/themes/Artify/images/Loading.gif" alt="">
            </span>
        </dd>
    </dl>
</div>

Javascript

$("input[name='checkout_type']").click(function() {
    $('#uniform-checkout_type_guest').text('Checkout as Guest');
    $( "#uniform-checkout_type_guest" ).append( "<strong>---Hello</strong>" )
});

Answer 1

您可以进行以下三个更改，以使您的 jQuery 更加简洁：

1. 将标签文本放入spanelement
2. 给 span 元素一个通用类 - radio-label
3. 为您的单选按钮添加 data 属性 - data-default-text

//wait for DOM ready event
$(function() {
  
    //attach a change event listener to the radio buttons -- could give them a common class
    $(':radio[name=checkout_type]').on('change', function() {
        //reset labels
        $('.radio-label').text( function() { 
            return $(this).closest('label').find(':radio').data('default-text'); 
        });
        
        //set new label per checked radio
        $(this).closest('label').children('.radio-label')
        .text( $(this).data('default-text') + ' -->  Please Press Continue' );
    })
    
    //trigger change in case a radio is selected when page loads
    .change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="PL40" style="line-height: 2;">
    <dl>
        <dd>
            <label>
                <div class="radio" id="uniform-checkout_type_guest">
                    <span class="">
                        <input name="checkout_type" id="checkout_type_guest" value="guest" type="radio" onclick="$('#BillingDetailsLabel').html('Billing Details');" data-default-text="Checkout as a guest">
                    </span>
                </div>
                <span class="radio-label">Checkout as a guest</span>
            </label>
        </dd>
        <dd>
            <label>
                <div class="radio" id="uniform-checkout_type_register">
                    <span class="checked">
                        <input name="checkout_type" id="checkout_type_register" value="register" checked="checked" type="radio" onclick="$('#BillingDetailsLabel').html('Billing &amp; Account Details');" data-default-text="Register an account">
                    </span>
                </div>
                <span class="radio-label">Register an account</span>
            </label>
        </dd>
        <dd class="Submit mt10 mb10">
            <input type="submit" id="CreateAccountButton" value="Continue" class="btn"> 
            <span class="LoadingIndicator" style="display: none">
                <img src="https://cdn6.bigcommerce.com/r-b99d97b0aae9cde0306565d8de6f047a25afdd8a/themes/Artify/images/Loading.gif" alt="">
            </span>
        </dd>
    </dl>
</div>

Answer 2

注意：此答案假定您使用的是 jQuery Mobile，因为您的问题上有该标签。

设置简单的单选按钮并让 jQM 增强它们：

<dd>
    <label>
        <input name="checkout_type" id="checkout_type_guest" value="guest" type="radio" />
        Checkout as a guest
    </label>
</dd>
<dd>
    <label>
        <input name="checkout_type" id="checkout_type_register" value="register" checked="checked" type="radio" />
        Register an account
    </label>
</dd>

然后监听change事件：

$("input[name='checkout_type']").on("change", function() {       
    $("input[name='checkout_type']").each(function(){
        var text = '';
        if ($(this).val() == "guest"){
            text = "Checkout as a guest";
        } else {
            text = "Register an account";
        }
        if ($(this).is(":checked")) {
            text += " --> Please Press continue";   
        }
        $(this).closest(".ui-radio").find("label.ui-btn").text(text);
    });
});

遍历每个单选按钮，看看它是否被选中，然后相应地设置文本。

DEMO

更新：

使用 PeterKA 的 data 属性作为默认文本使代码更加美观：

$("input[name='checkout_type']").on("change", function() {       
    $("input[name='checkout_type']").each(function(){
        var text = $(this).data('default-text');
        if ($(this).is(":checked")) {
            text += " --> Please Press continue";   
        }
        $(this).closest(".ui-radio").find("label.ui-btn").text(text);
    });
}).change();

更新DEMO