根据输入字段的值隐藏显示无线电选项

Question

我有一个表单，用户进入他们的国家。 如果价值不是“美国”，我想隐藏国内运输选项，只显示国际运输选项。

所以这就是我想要完成的事情：

国家/地区的值在此输入字段中处理，该字段定义了计费地址。 默认情况下，此输入字段显示。

<input id="customer_country_name" name="customer_country_name" value="United States"/>

但是，如果用户选择发送到用于结算的其他地址，则必须选中一个复选框：

<input id="use_different_addresses" name="use_different_addresses"/>

如果他们选择此选项，输入字段将显示以下信息，他们将输入他们的送货地址国家/地区：

<input id="shipping_country_name" name="shipping_country_name" value="United States"/>

现在，运输选项位于表单的底部。 他们有这种格式：

<div id="fc_shipping_methods_inner">

    <label for="shipping_service_fedexOvernight" class="fc_radio">
    <input type="radio" class="fc_radio fc_required" value="fedexOvernight|37.95" id="shipping_service_fedexOvernight" name="shipping_service" />
    <span class="fc_shipping_carrier">FedEx </span>
    <span class="fc_shipping_service">Overnight U.S. Domestic</span>
    <span class="fc_shipping_cost">$37.95</span>
    </label>


    <label for="shipping_service_fedexIntlOvernight" class="fc_radio">
    <input type="radio" class="fc_radio fc_required" value="fedexIntlOvernight|75.00" id="shipping_service_fedexIntlOvernight" name="shipping_service" />
    <span class="fc_shipping_carrier">FedEx </span>
    <span class="fc_shipping_service">Overnight International (Outside U.S.)</span>
    <span class="fc_shipping_cost">$75.00</span>
    </label> 

</div><!-- end #fc_shipping_methods_inner -->

将有许多运输选项，但只有一个用于国际（具有“shipping_service_fedexIntlOvernight”标签的那个）。 理想情况下，如果该国家/地区不是美国，并且只显示带有“shipping_service_fedexIntlOvernight”值的标签，我会隐藏其他标签。 如果用户在上述任一选项中将其国家/地区值更改回美国，我希望其他运送选项再次显示。

谢谢！

Answer 1

首先，我只是在标签上添加一个类，仅限于美国，例如radio_us ，对于您的示例，这样做：

<label for="shipping_service_fedexOvernight" class="fc_radio radio_us">
    <input type="radio" class="fc_radio fc_required" value="fedexOvernight|37.95" id="shipping_service_fedexOvernight" name="shipping_service" />
    <span class="fc_shipping_carrier">FedEx </span>
    <span class="fc_shipping_service">Overnight U.S. Domestic</span>
    <span class="fc_shipping_cost">$37.95</span>
</label>

和你的JavaScript代码：

$(document).ready(function() {
    $('#shipping_country_name').keyup(function() {
        if (this.value == 'United States') {
            $('.radio_us').show();
        }
        else {
            $('.radio_us').hide();
        }
    });
});

Answer 2

非常感谢你指出我正确的方向。 这是我最终根据你的帮助提出的：

<script type="text/javascript">
$(document).ready(function(){

$("label[for=shipping_service_uspsPriority], label[for=shipping_service_uspsIntlPriority], label[for=shipping_service_uspsExpress], label[for=shipping_service_fedexOvernight]").addClass('radio_us');

    $('#customer_country_name').change(function() {
        if ($('#customer_country_name').val() != 'United States') {
            $('.radio_us').hide();
        }
        else {
            $('.radio_us').show();
        }
    });
});   
</script>