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更加简洁：

将标签文字放在databaseinserter.py元素
为span元素提供一个公共类 - span
向您的单选按钮添加radio-label属性 - data

＆＃13;

data-default-text

＆＃13;

//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();
});

＆＃13;

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>

然后听取改变事件：

$("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

UPDATE：

使用PeterKA的默认文本数据属性可以使代码更好：

$("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

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

2 个答案:

UPDATE：