如何用jQuery实现表格列下列表选项的单选切换隐藏功能

给定如下HTML结构：

<table><tr><td class="product-name">Product Name</td><td class="product-price"><ul class="wcsatt-options overrides_exist">
            <li class="one-time-option">
            <label>
                <input type="radio" name="cart[511e54615e04fe5b038663461729f5ec][convert_to_sub]" value="0" checked="checked">
                <span class="one-time-option-details"><span class="one-time-option-price"><span class="woocommerce-Price-amount amount"><bdi>34,00<span class="woocommerce-Price-currencySymbol">€</span></bdi></span></span></span>                </label>
        </li>
                <li class="subscription-option">
            <label>
                <input type="radio" name="cart[511e54615e04fe5b038663461729f5ec][convert_to_sub]" value="3_month">
                <span class="subscription-option-details"><span class="price subscription-price"><span class="woocommerce-Price-amount amount"><bdi>28,90<span class="woocommerce-Price-currencySymbol">€</span></bdi></span> <span class="subscription-details"> chaque 3 mois</span></span></span>                </label>
        </li>
                <li class="subscription-option">
            <label>
                <input type="radio" name="cart[511e54615e04fe5b038663461729f5ec][convert_to_sub]" value="4_month">
                <span class="subscription-option-details"><span class="price subscription-price"><span class="woocommerce-Price-amount amount"><bdi>28,90<span class="woocommerce-Price-currencySymbol">€</span></bdi></span> <span class="subscription-details"> chaque 4 mois</span></span></span>                </label>
        </li>
                <li class="subscription-option">
            <label>
                <input type="radio" name="cart[511e54615e04fe5b038663461729f5ec][convert_to_sub]" value="6_month">
                <span class="subscription-option-details"><span class="price subscription-price"><span class="woocommerce-Price-amount amount"><bdi>28,90<span class="woocommerce-Price-currencySymbol">€</span></bdi></span> <span class="subscription-details"> chaque 6 mois</span></span></span>                </label>
        </li>
    </ul></td></tr>

需求：

• 选中任意.subscription-option下的单选按钮时，隐藏.one-time-option元素
• 选中.one-time-option下的单选按钮时，隐藏所有.subscription-option元素

解决方案代码 #

$(document).ready(function() {
    // 绑定单选按钮切换事件
    $('input[name="cart[511e54615e04fe5b038663461729f5ec][convert_to_sub]"]').on('change', function() {
        const $parentLi = $(this).closest('li');
        
        if ($parentLi.hasClass('subscription-option')) {
            $('.one-time-option').hide();
            $('.subscription-option').show();
        } else if ($parentLi.hasClass('one-time-option')) {
            $('.subscription-option').hide();
            $('.one-time-option').show();
        }
    });

    // 页面加载时初始化显示状态
    $('input[name="cart[511e54615e04fe5b038663461729f5ec][convert_to_sub]"]:checked').trigger('change');
});

代码说明 #

1. 用$(document).ready()确保DOM完全加载后再绑定事件，避免找不到元素的问题
2. 监听所有目标单选按钮的change事件，每次切换时通过closest('li')找到对应的父级列表项
3. 根据父级列表项的类名判断选中类型，执行对应的隐藏/显示操作
4. 页面初始化时主动触发一次选中项的事件，保证初始显示状态符合需求

内容的提问来源于stack exchange，提问作者iamninafaye