如何根据是否选中单选按钮交换按钮(使用jQuery)

基本上,有一个带有一个主类的默认按钮,上面写着“Deliver to this Address”,但是当卡被选中时,它应该改为“Selected Address”。这正在起作用。我第一次尝试使用“相同”按钮,但是改变了内部文本或html,以及类,但是效果不太好。所以,现在我想根据选中的单选按钮状态来显示和隐藏按钮。

但是,我和兄弟姐妹、父母、孩子等相处得很不愉快-遍历DOM以获得我想要的效果。我想要的是只有选中的卡显示绿色与“选定的地址”按钮。如果其中一张卡被选中,这甚至应该在页面加载上。而且,当我检查另一张卡时,要“取消”所有其他卡并将该按钮还原为“发送到此地址”按钮。

我做了一把JS小提琴来充分表达我的意思: https://jsfiddle.net/gamehendgeVA/b98v65tx/3/

这是我试过的JS:

 jQuery(".selectedAddressButton").hide();

  jQuery(function () {
     jQuery(".addressRadio").change(function() {
    if (jQuery(this).is(":checked")) {
        jQuery(this).siblings().find(".selectedAddressButton").show();
        jQuery(this).siblings().find(".deliverButton").hide();
    } else {
        jQuery(this).siblings().find(".selectedAddressButton").hide();
        jQuery(this).parents().find(".deliverButton").show();
    }
 });
});

$ 因为一些奇怪的工作文件,所以无法确定原因。)

其中一个单选按钮的片段 "cards" :

<label class="fullWidth">
        <input type="radio" name="selectAddress" class="card-input-element d-none hideOffScreen addressRadio" id="address1" value="address1">
        <div class="card card-body bg-light d-flex flex-row justify-content-between align-items-center radioCard">
            <div class="addressField">John Doe</div>
            <div class="addressField">123 Anytown St.</div>
            <div class="addressField">Springfield, MD 22365</div>
            <div class="row">
                <div class="col-md-12 text-left">
                    <div class="deliverButton" style="margin-top:12px;">
                        <div type="button" class="btn btn-primary-custom" style="margin-right:10px;">Deliver to this Address</div>
                    </div>
                    <div class="selectedAddressButton" style="margin-top:12px;">
                        <div style="margin-top:12px;">
                            <div type="button" class="btn btn-success-custom" style="margin-right:10px;"><i class="fa fa-check" aria-hidden="true" style="padding-right:6px;"></i>Selected Address</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-left =" style="margin-top:15px;">
                    <button type="button" class="btn btn-secondary-custom" style="margin-right:10px;">Edit</button>
                    <button type="button" class="btn btn-secondary-custom">Delete</button>
                </div>
            </div>
        </div>
</label>

感谢您的帮助!谢谢!