在 Prestashop 结帐中使用 jquery 选择单选按钮时如何隐藏字段
[英]How to hide fields when radio button is selected with jquery in Prestashop checkout
问题描述
我有什么：2 个单选按钮和几个字段。
我想要什么： - 当单选按钮“送货地址”显示：地址 1、邮政编码和城市 - 并隐藏 id_state 字段。 - 选择其他按钮选择“交付到运营商办公室”以隐藏字段：地址1，邮政编码和城市 - 但要显示ID_STATE（我将其用于选择的运营商办公室）
我在结帐页面中使用了几个显示此单选按钮的 .tpl 文件。 单选按钮来自 order-carrier.tpl 文件：
<div class="delivery_options">
{foreach $option_list as $key => $option}
<div class="delivery_option {if ($option@index % 2)}alternate_{/if}item">
<input class="delivery_option_radio" type="radio" name="delivery_option[{$id_address}]" onchange="{if $opc}updateCarrierSelectionAndGift();{else}updateExtraCarrier('{$key}', {$id_address});{/if}" id="delivery_option_{$id_address}_{$option@index}" value="{$key}" {if isset($delivery_option[$id_address]) && $delivery_option[$id_address] == $key}checked="checked"{/if} />
<label for="delivery_option_{$id_address}_{$option@index}">
<table class="resume">
<tr>
<td class="delivery_option_logo">
{foreach $option.carrier_list as $carrier}
{if $carrier.logo}
<img src="{$carrier.logo}" alt="{$carrier.instance->name}"/>
{else if !$option.unique_carrier}
{$carrier.instance->name}
{if !$carrier@last} - {/if}
{/if}
{/foreach}
</td>
<td>
{if $option.unique_carrier}
{foreach $option.carrier_list as $carrier}
<div class="delivery_option_title">{$carrier.instance->name}</div>
{/foreach}
{if isset($carrier.instance->delay[$cookie->id_lang])}
<div class="delivery_option_delay">{$carrier.instance->delay[$cookie->id_lang]}</div>
{/if}
{/if}
{if count($option_list) > 1}
{if $option.is_best_grade}
{if $option.is_best_price}
<div class="delivery_option_best delivery_option_icon">{l s='The best price and speed'}</div>
{else}
<div class="delivery_option_fast delivery_option_icon">{l s='The fastest'}</div>
{/if}
{else}
{if $option.is_best_price}
<div class="delivery_option_best_price delivery_option_icon">{l s='The best price'}</div>
{/if}
{/if}
{/if}
</td>
<td>
<div class="delivery_option_price">
{if $option.total_price_with_tax && (!isset($free_shipping) || (isset($free_shipping) && !$free_shipping))}
{if $use_taxes == 1}
{if $priceDisplay == 1}
{convertPrice price=$option.total_price_without_tax} {l s='(tax excl.)'}
{else}
{convertPrice price=$option.total_price_with_tax} {l s='(tax incl.)'}
{/if}
{/if}
{else}
{l s='Free'}
{/if}
</div>
</td>
</tr>
</table>
<table class="delivery_option_carrier {if isset($delivery_option[$id_address]) && $delivery_option[$id_address] == $key}selected{/if} {if $option.unique_carrier}not-displayable{/if}">
{foreach $option.carrier_list as $carrier}
<tr>
{if !$option.unique_carrier}
<td class="first_item">
<input type="hidden" value="{$carrier.instance->id}" name="id_carrier" />
{if $carrier.logo}
<img src="{$carrier.logo}" alt="{$carrier.instance->name}"/>
{/if}
</td>
<td>
{$carrier.instance->name}
</td>
{/if}
<td {if $option.unique_carrier}class="first_item" colspan="2"{/if}>
<input type="hidden" value="{$carrier.instance->id}" name="id_carrier" />
{if isset($carrier.instance->delay[$cookie->id_lang])}
{$carrier.instance->delay[$cookie->id_lang]}<br />
{if count($carrier.product_list) <= 1}
({l s='Product concerned:'}
{else}
({l s='Products concerned:'}
{/if}
{* This foreach is on one line, to avoid tabulation in the title attribute of the acronym *}
{foreach $carrier.product_list as $product}
{if $product@index == 4}<acronym title="{/if}{if $product@index >= 4}{$product.name}{if isset($product.attributes) && $product.attributes} {$product.attributes|escape:'htmlall':'UTF-8'}{/if}{if !$product@last}, {else}">...</acronym>){/if}{else}{$product.name}{if isset($product.attributes) && $product.attributes} {$product.attributes|escape:'htmlall':'UTF-8'}{/if}{if !$product@last}, {else}){/if}{/if}{/foreach}
{/if}
</td>
</tr>
{/foreach}
</table>
</label>
</div>
字段来自 order-opc-new-account.tpl：
<p class="text">
<label for="company">{l s='Company'}</label>
<input type="text" class="text" id="company" name="company" value="{if isset($guestInformations) && $guestInformations.company}{$guestInformations.company}{/if}" />
</p>
{elseif $field_name eq "vat_number"}
<div id="vat_number_block" style="display:none;">
<p class="text">
<label for="vat_number">{l s='VAT number'}</label>
<input type="text" class="text" name="vat_number" id="vat_number" value="{if isset($guestInformations) && $guestInformations.vat_number}{$guestInformations.vat_number}{/if}" />
</p>
</div>
{elseif $field_name eq "dni"}
{assign var='dniExist' value=true}
<p class="text">
<label for="dni">{l s='Identification number'}</label>
<input type="text" class="text" name="dni" id="dni" value="{if isset($guestInformations) && $guestInformations.dni}{$guestInformations.dni}{/if}" />
<span class="form_info">{l s='DNI / NIF / NIE'}</span>
</p>
{elseif $field_name eq "firstname"}
<p class="required text">
<label for="firstname">{l s=''}</label>
<input type="text" class="text" id="firstname" name="firstname" value="{if isset($guestInformations) && $guestInformations.firstname}{$guestInformations.firstname}{/if}" placeholder="Име" required />
</p>
{elseif $field_name eq "lastname"}
<p class="required text">
<label for="lastname">{l s=''}</label>
<input type="text" class="text" id="lastname" name="lastname" value="{if isset($guestInformations) && $guestInformations.lastname}{$guestInformations.lastname}{/if}" placeholder="Фамилия" required />
</p>
<p class="{if isset($one_phone_at_least) && $one_phone_at_least}required {/if}text">
<label for="phone_mobile">{l s=''}{if isset($one_phone_at_least) && $one_phone_at_least}{/if}</label>
<input type="text" class="text" name="phone_mobile" id="phone_mobile" value="{if isset($guestInformations) && $guestInformations.phone_mobile}{$guestInformations.phone_mobile}{/if}" placeholder="Телефон" required />
<span class="form_hint">Въведи коректен телефон номер, на който може да те потърсим относно поръчката!</span>
</p>
{elseif $field_name eq "postcode"}
{$postCodeExist = true}
<p class="required postcode text" style="display:none">
<label for="postcode">{l s=''}</label>
<input type="text" class="text" name="postcode" id="postcode" value="{if isset($guestInformations) && $guestInformations.postcode}{$guestInformations.postcode}{/if}" onkeyup="$('#postcode').val($('#postcode').val().toUpperCase());" placeholder="Пощенски код" required />
<span class="form_hint">Въведи четири цифрения пощенски код на твоето населено място.</span>
</p>
{elseif $field_name eq "city"}
<p class="required text">
<label for="city">{l s=''} </label>
<input type="text" class="text" name="city" id="city" value="{if isset($guestInformations) && $guestInformations.city}{$guestInformations.city}{/if}" placeholder="Град/Село" required />
</p>
{elseif $field_name eq "address1"}
<p class="required text">
<label for="address1">{l s=''} </label>
<input type="text" class="text" name="address1" id="address1" value="{if isset($guestInformations) && $guestInformations.address1}{$guestInformations.address1}{/if}" placeholder="кв./ бул./ ул./ №/ ет./ ап." required />
<span class="form_hint">Ако желаеш доставка до адрес, упъти ни къде точно да доставим пратката ти. Ако желаеш да получиш поръчката си по-бързо и евтино, напиши тук офиса на Еконт в твоя град и вземи пратката си от там - виж помощната информация в дясно и научи дали има офис на Еконт в твоя град.</span>
</p>
{elseif $field_name eq "country" || $field_name eq "Country:name"}
<p class="required select">
<label for="id_country">{l s=''}</label>
<select name="id_country" id="id_country" placeholder="Изберете офис">
{foreach from=$countries item=v}
<option value="{$v.id_country}"{if (isset($guestInformations) AND $guestInformations.id_country == $v.id_country) OR (!isset($guestInformations) && $sl_country == $v.id_country)} selected="selected"{/if}>{$v.name|escape:'htmlall':'UTF-8'}</option>
{/foreach}
</select>
</p>
{elseif $field_name eq "state" || $field_name eq 'State:name'}
{$stateExist = true}
<p class="required id_state select" style="display:none;">
<label for="id_state">{l s=''}</label>
<select name="id_state" id="id_state">
<option value="">-</option>
</select>
</p>
{/if}
{/foreach}
{if !$postCodeExist}
<p class="required postcode text hidden">
<label for="postcode">{l s='Zip / Postal code'} <sup>*</sup></label>
<input type="text" class="text" name="postcode" id="postcode" value="{if isset($guestInformations) && $guestInformations.postcode}{$guestInformations.postcode}{/if}" onkeyup="$('#postcode').val($('#postcode').val().toUpperCase());" />
</p>
{/if}
{if !$stateExist}
<p class="required id_state select hidden">
<label for="id_state">{l s=''}</label>
<select name="id_state" id="id_state">
<option value="">-</option>
</select>
</p>
{/if}
{if !$dniExist}
<p class="required text dni">
<label for="dni">{l s='Identification number'} <sup>*</sup></label>
<input type="text" class="text" name="dni" id="dni" value="{if isset($guestInformations) && $guestInformations.dni}{$guestInformations.dni}{/if}" />
<span class="form_info">{l s='DNI / NIF / NIE'}</span>
</p>
{/if}
<input type="hidden" name="alias" id="alias" value="{l s='My address'}"/>
<div id="opc_invoice_address" class="is_customer_param">
{assign var=stateExist value=false}
{assign var=postCodeExist value=false}
{assign var=dniExist value=false}
<h3>{l s='Invoice address'}</h3>
{foreach from=$inv_all_fields item=field_name}
{if $field_name eq "company" && $b2b_enable}
<p class="text">
<label for="company_invoice">{l s='Company'}</label>
<input type="text" class="text" id="company_invoice" name="company_invoice" value="" />
</p>
{elseif $field_name eq "vat_number"}
<div id="vat_number_block_invoice" class="is_customer_param" style="display:none;">
<p class="text">
<label for="vat_number_invoice">{l s='VAT number'}</label>
<input type="text" class="text" id="vat_number_invoice" name="vat_number_invoice" value="" />
</p>
</div>
{elseif $field_name eq "dni"}
{assign var='dniExist' value=true}
<p class="text">
<label for="dni_invoice">{l s='Identification number'}</label>
<input type="text" class="text" name="dni_invoice" id="dni_invoice" value="{if isset($guestInformations) && $guestInformations.dni_invoice}{$guestInformations.dni_invoice}{/if}" />
<span class="form_info">{l s='DNI / NIF / NIE'}</span>
</p>
{elseif $field_name eq "firstname"}
<p class="required text">
<label for="firstname_invoice">{l s='First name'} <sup>*</sup></label>
<input type="text" class="text" id="firstname_invoice" name="firstname_invoice" value="{if isset($guestInformations) && $guestInformations.firstname_invoice}{$guestInformations.firstname_invoice}{/if}" />
</p>
{elseif $field_name eq "lastname"}
<p class="required text">
<label for="lastname_invoice">{l s='Last name'} <sup>*</sup></label>
<input type="text" class="text" id="lastname_invoice" name="lastname_invoice" value="{if isset($guestInformations) && $guestInformations.lastname_invoice}{$guestInformations.lastname_invoice}{/if}" />
</p>
{elseif $field_name eq "address1"}
<p class="required text">
<label for="address1_invoice">{l s='Address'} <sup>*</sup></label>
<input type="text" class="text" name="address1_invoice" id="address1_invoice" value="{if isset($guestInformations) && $guestInformations.address1_invoice}{$guestInformations.address1_invoice}{/if}" />
</p>
{elseif $field_name eq "address2"}
<p class="text is_customer_param">
<label for="address2_invoice">{l s='Address (Line 2)'}</label>
<input type="text" class="text" name="address2_invoice" id="address2_invoice" value="{if isset($guestInformations) && $guestInformations.address2_invoice}{$guestInformations.address2_invoice}{/if}" />
</p>
{elseif $field_name eq "postcode"}
{$postCodeExist = true}
<p class="required postcode_invoice text">
<label for="postcode_invoice">{l s='Zip / Postal Code'} <sup>*</sup></label>
<input type="text" class="text" name="postcode_invoice" id="postcode_invoice" value="{if isset($guestInformations) && $guestInformations.postcode_invoice}{$guestInformations.postcode_invoice}{/if}" onkeyup="$('#postcode_invoice').val($('#postcode_invoice').val().toUpperCase());" />
</p>
{elseif $field_name eq "city"}
<p class="required text">
<label for="city_invoice">{l s='City'} <sup>*</sup></label>
<input type="text" class="text" name="city_invoice" id="city_invoice" value="{if isset($guestInformations) && $guestInformations.city_invoice}{$guestInformations.city_invoice}{/if}" />
</p>
@Brian 更正了我的代码并且现在可以工作，但是在单选按钮的几次更改后停止工作 - 或者只在第一次工作时改变为什么？
<script>
$(document).ready(function(){
toggleFields();
$('.delivery_option_radio').on('change', function() {
toggleFields();
});
});
function toggleFields() {
if ($('#delivery_option_0_0').is(':checked')) {
$('#address1').show();
$('#postcode').show();
$('#city').show();
$('#id_state').hide();
} else {
$('#address1').hide();
$('#postcode').hide();
$('#city').hide();
$('#id_state').show();
}
}
</script>
您可以在以下位置测试实时页面：test.detelinmarkov.com/quick-order（首先您需要在购物车中添加一些东西）
Ps：我尝试用纯CSS隐藏它但不起作用。
1 个解决方案
解决方案1
0 2014-04-05 06:53:17
我知道你的问题，交付无线电是由 ajax 生成的，所以你需要附加你的脚本来刷新每个 ajax 调用。
对不起我的英语不好 ： ）
jQuery：选择第一个或第二个单选按钮时显示/隐藏Div
[英]jQuery: show / hide Div when first or second radio button is selected
选择单选按钮时如何显示元素，而未使用javascript选择时如何隐藏元素？
[英]How to display an element when radio button is selected and hide it when is not selected using javascript?
在业务催化剂结帐中选择PayPal时如何隐藏信用卡字段
[英]how to hide credit card fields when PayPal is selected in business catalyst checkout
在jQuery中动态选择时如何获取单选按钮的名称和值？
[英]How to get the NAME and value of a radio button when DYNAMICALLY selected - in jQuery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.