title: How to hide fields when radio button is selected with jquery in Prestashop checkout
body: <p>What i have: 2 radio buttons and several fields.</p>
  
  <p>What i want:
  - When radio button "delivery to address" to SHOW: addres1, postcode and city - and hide id_state field.
  - When other button is selected "delivery to carrier office" is selected to hide fields: address1, postcode and city - but to show id_state (i use it for select carrier offices)</p>
  
  <p>I use several .tpl files in checkout page that showing this radio buttons. Radio buttons are get from order-carrier.tpl file:</p>
  
  <pre><code>&lt;div class="delivery_options"&gt;
          {foreach $option_list as $key =&gt; $option}
              &lt;div class="delivery_option {if ($option@index % 2)}alternate_{/if}item"&gt;
                  &lt;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]) &amp;&amp; $delivery_option[$id_address] == $key}checked="checked"{/if} /&gt;
                  &lt;label for="delivery_option_{$id_address}_{$option@index}"&gt;
                      &lt;table class="resume"&gt;
                          &lt;tr&gt;
                              &lt;td class="delivery_option_logo"&gt;
                                  {foreach $option.carrier_list as $carrier}
                                      {if $carrier.logo}
                                          &lt;img src="{$carrier.logo}" alt="{$carrier.instance-&gt;name}"/&gt;
                                      {else if !$option.unique_carrier}
                                          {$carrier.instance-&gt;name}
                                          {if !$carrier@last} - {/if}
                                      {/if}
                                  {/foreach}
                              &lt;/td&gt;
                              &lt;td&gt;
                              {if $option.unique_carrier}
                                  {foreach $option.carrier_list as $carrier}
                                      &lt;div class="delivery_option_title"&gt;{$carrier.instance-&gt;name}&lt;/div&gt;
                                  {/foreach}
                                  {if isset($carrier.instance-&gt;delay[$cookie-&gt;id_lang])}
                                      &lt;div class="delivery_option_delay"&gt;{$carrier.instance-&gt;delay[$cookie-&gt;id_lang]}&lt;/div&gt;
                                  {/if}
                              {/if}
                              {if count($option_list) &gt; 1}
                                  {if $option.is_best_grade}
                                      {if $option.is_best_price}
                                      &lt;div class="delivery_option_best delivery_option_icon"&gt;{l s='The best price and speed'}&lt;/div&gt;
                                      {else}
                                      &lt;div class="delivery_option_fast delivery_option_icon"&gt;{l s='The fastest'}&lt;/div&gt;
                                      {/if}
                                  {else}
                                      {if $option.is_best_price}
                                      &lt;div class="delivery_option_best_price delivery_option_icon"&gt;{l s='The best price'}&lt;/div&gt;
                                      {/if}
                                  {/if}
                              {/if}
                              &lt;/td&gt;
                              &lt;td&gt;
                              &lt;div class="delivery_option_price"&gt;
                                  {if $option.total_price_with_tax &amp;&amp; (!isset($free_shipping) || (isset($free_shipping) &amp;&amp; !$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}
                              &lt;/div&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;table class="delivery_option_carrier {if isset($delivery_option[$id_address]) &amp;&amp; $delivery_option[$id_address] == $key}selected{/if} {if $option.unique_carrier}not-displayable{/if}"&gt;
                          {foreach $option.carrier_list as $carrier}
                          &lt;tr&gt;
                              {if !$option.unique_carrier}
                              &lt;td class="first_item"&gt;
                              &lt;input type="hidden" value="{$carrier.instance-&gt;id}" name="id_carrier" /&gt;
                                  {if $carrier.logo}
                                      &lt;img src="{$carrier.logo}" alt="{$carrier.instance-&gt;name}"/&gt;
                                  {/if}
                              &lt;/td&gt;
                              &lt;td&gt;
                                  {$carrier.instance-&gt;name}
                              &lt;/td&gt;
                              {/if}
                              &lt;td {if $option.unique_carrier}class="first_item" colspan="2"{/if}&gt;
                                  &lt;input type="hidden" value="{$carrier.instance-&gt;id}" name="id_carrier" /&gt;
                                  {if isset($carrier.instance-&gt;delay[$cookie-&gt;id_lang])}
                                      {$carrier.instance-&gt;delay[$cookie-&gt;id_lang]}&lt;br /&gt;
                                      {if count($carrier.product_list) &lt;= 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}&lt;acronym title="{/if}{if $product@index &gt;= 4}{$product.name}{if isset($product.attributes) &amp;&amp; $product.attributes} {$product.attributes|escape:'htmlall':'UTF-8'}{/if}{if !$product@last}, {else}"&gt;...&lt;/acronym&gt;){/if}{else}{$product.name}{if isset($product.attributes) &amp;&amp; $product.attributes} {$product.attributes|escape:'htmlall':'UTF-8'}{/if}{if !$product@last}, {else}){/if}{/if}{/foreach}
                                  {/if}
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      {/foreach}
                      &lt;/table&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>And fields are from order-opc-new-account.tpl:</p>
  
  <pre><code>&lt;p class="text"&gt;
                  &lt;label for="company"&gt;{l s='Company'}&lt;/label&gt;
                  &lt;input type="text" class="text" id="company" name="company" value="{if isset($guestInformations) &amp;&amp; $guestInformations.company}{$guestInformations.company}{/if}" /&gt;
              &lt;/p&gt;
              {elseif $field_name eq "vat_number"}    
              &lt;div id="vat_number_block" style="display:none;"&gt;
                  &lt;p class="text"&gt;
                      &lt;label for="vat_number"&gt;{l s='VAT number'}&lt;/label&gt;
                      &lt;input type="text" class="text" name="vat_number" id="vat_number" value="{if isset($guestInformations) &amp;&amp; $guestInformations.vat_number}{$guestInformations.vat_number}{/if}" /&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
              {elseif $field_name eq "dni"}
              {assign var='dniExist' value=true}
              &lt;p class="text"&gt;
                  &lt;label for="dni"&gt;{l s='Identification number'}&lt;/label&gt;
                  &lt;input type="text" class="text" name="dni" id="dni" value="{if isset($guestInformations) &amp;&amp; $guestInformations.dni}{$guestInformations.dni}{/if}" /&gt;
                  &lt;span class="form_info"&gt;{l s='DNI / NIF / NIE'}&lt;/span&gt;
              &lt;/p&gt;
              {elseif $field_name eq "firstname"}
              &lt;p class="required text"&gt;
                  &lt;label for="firstname"&gt;{l s=''}&lt;/label&gt;
                  &lt;input type="text" class="text" id="firstname" name="firstname" value="{if isset($guestInformations) &amp;&amp; $guestInformations.firstname}{$guestInformations.firstname}{/if}" placeholder="Име" required /&gt;
              &lt;/p&gt;
              {elseif $field_name eq "lastname"}
              &lt;p class="required text"&gt;
                  &lt;label for="lastname"&gt;{l s=''}&lt;/label&gt;
                  &lt;input type="text" class="text" id="lastname" name="lastname" value="{if isset($guestInformations) &amp;&amp; $guestInformations.lastname}{$guestInformations.lastname}{/if}" placeholder="Фамилия" required /&gt;
              &lt;/p&gt;
              &lt;p class="{if isset($one_phone_at_least) &amp;&amp; $one_phone_at_least}required {/if}text"&gt;
                  &lt;label for="phone_mobile"&gt;{l s=''}{if isset($one_phone_at_least) &amp;&amp; $one_phone_at_least}{/if}&lt;/label&gt;
                  &lt;input type="text" class="text" name="phone_mobile" id="phone_mobile" value="{if isset($guestInformations) &amp;&amp; $guestInformations.phone_mobile}{$guestInformations.phone_mobile}{/if}" placeholder="Телефон" required /&gt;
                  &lt;span class="form_hint"&gt;Въведи коректен телефон номер, на който може да те потърсим относно поръчката!&lt;/span&gt;
              &lt;/p&gt;
              {elseif $field_name eq "postcode"}
              {$postCodeExist = true}
              &lt;p class="required postcode text" style="display:none"&gt;
                  &lt;label for="postcode"&gt;{l s=''}&lt;/label&gt;
                  &lt;input type="text" class="text" name="postcode" id="postcode" value="{if isset($guestInformations) &amp;&amp; $guestInformations.postcode}{$guestInformations.postcode}{/if}" onkeyup="$('#postcode').val($('#postcode').val().toUpperCase());" placeholder="Пощенски код" required /&gt;
                  &lt;span class="form_hint"&gt;Въведи четири цифрения пощенски код на твоето населено място.&lt;/span&gt;
              &lt;/p&gt;
              {elseif $field_name eq "city"}
              &lt;p class="required text"&gt;
                  &lt;label for="city"&gt;{l s=''} &lt;/label&gt;
                  &lt;input type="text" class="text" name="city" id="city" value="{if isset($guestInformations) &amp;&amp; $guestInformations.city}{$guestInformations.city}{/if}" placeholder="Град/Село" required /&gt;
              &lt;/p&gt;
              {elseif $field_name eq "address1"}
              &lt;p class="required text"&gt;
                  &lt;label for="address1"&gt;{l s=''} &lt;/label&gt;
                  &lt;input type="text" class="text" name="address1" id="address1" value="{if isset($guestInformations) &amp;&amp; $guestInformations.address1}{$guestInformations.address1}{/if}" placeholder="кв./ бул./ ул./ №/ ет./ ап." required /&gt;
                  &lt;span class="form_hint"&gt;Ако желаеш доставка до адрес, упъти ни къде точно да доставим пратката ти. Ако желаеш да получиш поръчката си по-бързо и евтино, напиши тук офиса на Еконт в твоя град и вземи пратката си от там - виж помощната информация в дясно и научи дали има офис на Еконт в твоя град.&lt;/span&gt;
              &lt;/p&gt;
              {elseif $field_name eq "country" || $field_name eq "Country:name"}
              &lt;p class="required select"&gt;
                  &lt;label for="id_country"&gt;{l s=''}&lt;/label&gt;
                  &lt;select name="id_country" id="id_country" placeholder="Изберете офис"&gt;
                      {foreach from=$countries item=v}
                      &lt;option value="{$v.id_country}"{if (isset($guestInformations) AND $guestInformations.id_country == $v.id_country) OR (!isset($guestInformations) &amp;&amp; $sl_country == $v.id_country)} selected="selected"{/if}&gt;{$v.name|escape:'htmlall':'UTF-8'}&lt;/option&gt;
                      {/foreach}
                  &lt;/select&gt;
              &lt;/p&gt;
              {elseif $field_name eq "state" || $field_name eq 'State:name'}
              {$stateExist = true}
              &lt;p class="required id_state select" style="display:none;"&gt;
                  &lt;label for="id_state"&gt;{l s=''}&lt;/label&gt;
                  &lt;select name="id_state" id="id_state"&gt;
                      &lt;option value=""&gt;-&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/p&gt;
              {/if}
              {/foreach}
              {if !$postCodeExist}
              &lt;p class="required postcode text hidden"&gt;
                  &lt;label for="postcode"&gt;{l s='Zip / Postal code'} &lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
                  &lt;input type="text" class="text" name="postcode" id="postcode" value="{if isset($guestInformations) &amp;&amp; $guestInformations.postcode}{$guestInformations.postcode}{/if}" onkeyup="$('#postcode').val($('#postcode').val().toUpperCase());" /&gt;
              &lt;/p&gt;
              {/if}               
              {if !$stateExist}
              &lt;p class="required id_state select hidden"&gt;
                  &lt;label for="id_state"&gt;{l s=''}&lt;/label&gt;
                  &lt;select name="id_state" id="id_state"&gt;
                      &lt;option value=""&gt;-&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/p&gt;
              {/if}
              {if !$dniExist}
              &lt;p class="required text dni"&gt;
                  &lt;label for="dni"&gt;{l s='Identification number'} &lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
                  &lt;input type="text" class="text" name="dni" id="dni" value="{if isset($guestInformations) &amp;&amp; $guestInformations.dni}{$guestInformations.dni}{/if}" /&gt;
                  &lt;span class="form_info"&gt;{l s='DNI / NIF / NIE'}&lt;/span&gt;
              &lt;/p&gt;
              {/if}
              &lt;input type="hidden" name="alias" id="alias" value="{l s='My address'}"/&gt;
  
              &lt;div id="opc_invoice_address" class="is_customer_param"&gt;
                  {assign var=stateExist value=false}
                  {assign var=postCodeExist value=false}
                  {assign var=dniExist value=false}
                  &lt;h3&gt;{l s='Invoice address'}&lt;/h3&gt;
                  {foreach from=$inv_all_fields item=field_name}
                  {if $field_name eq "company" &amp;&amp;  $b2b_enable}
                  &lt;p class="text"&gt;
                      &lt;label for="company_invoice"&gt;{l s='Company'}&lt;/label&gt;
                      &lt;input type="text" class="text" id="company_invoice" name="company_invoice" value="" /&gt;
                  &lt;/p&gt;
                  {elseif $field_name eq "vat_number"}
                  &lt;div id="vat_number_block_invoice" class="is_customer_param" style="display:none;"&gt;
                      &lt;p class="text"&gt;
                          &lt;label for="vat_number_invoice"&gt;{l s='VAT number'}&lt;/label&gt;
                          &lt;input type="text" class="text" id="vat_number_invoice" name="vat_number_invoice" value="" /&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
                  {elseif $field_name eq "dni"}
                  {assign var='dniExist' value=true}
                  &lt;p class="text"&gt;
                      &lt;label for="dni_invoice"&gt;{l s='Identification number'}&lt;/label&gt;
                      &lt;input type="text" class="text" name="dni_invoice" id="dni_invoice" value="{if isset($guestInformations) &amp;&amp; $guestInformations.dni_invoice}{$guestInformations.dni_invoice}{/if}" /&gt;
                      &lt;span class="form_info"&gt;{l s='DNI / NIF / NIE'}&lt;/span&gt;
                  &lt;/p&gt;
                  {elseif $field_name eq "firstname"}
                  &lt;p class="required text"&gt;
                      &lt;label for="firstname_invoice"&gt;{l s='First name'} &lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
                      &lt;input type="text" class="text" id="firstname_invoice" name="firstname_invoice" value="{if isset($guestInformations) &amp;&amp; $guestInformations.firstname_invoice}{$guestInformations.firstname_invoice}{/if}" /&gt;
                  &lt;/p&gt;
                  {elseif $field_name eq "lastname"}
                  &lt;p class="required text"&gt;
                      &lt;label for="lastname_invoice"&gt;{l s='Last name'} &lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
                      &lt;input type="text" class="text" id="lastname_invoice" name="lastname_invoice" value="{if isset($guestInformations) &amp;&amp; $guestInformations.lastname_invoice}{$guestInformations.lastname_invoice}{/if}" /&gt;
                  &lt;/p&gt;
                  {elseif $field_name eq "address1"}
                  &lt;p class="required text"&gt;
                      &lt;label for="address1_invoice"&gt;{l s='Address'} &lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
                      &lt;input type="text" class="text" name="address1_invoice" id="address1_invoice" value="{if isset($guestInformations) &amp;&amp; $guestInformations.address1_invoice}{$guestInformations.address1_invoice}{/if}" /&gt;
                  &lt;/p&gt;
                  {elseif $field_name eq "address2"}
                  &lt;p class="text is_customer_param"&gt;
                      &lt;label for="address2_invoice"&gt;{l s='Address (Line 2)'}&lt;/label&gt;
                      &lt;input type="text" class="text" name="address2_invoice" id="address2_invoice" value="{if isset($guestInformations) &amp;&amp; $guestInformations.address2_invoice}{$guestInformations.address2_invoice}{/if}" /&gt;
                  &lt;/p&gt;
                  {elseif $field_name eq "postcode"}
                  {$postCodeExist = true}
                  &lt;p class="required postcode_invoice text"&gt;
                      &lt;label for="postcode_invoice"&gt;{l s='Zip / Postal Code'} &lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
                      &lt;input type="text" class="text" name="postcode_invoice" id="postcode_invoice" value="{if isset($guestInformations) &amp;&amp; $guestInformations.postcode_invoice}{$guestInformations.postcode_invoice}{/if}" onkeyup="$('#postcode_invoice').val($('#postcode_invoice').val().toUpperCase());" /&gt;
                  &lt;/p&gt;
                  {elseif $field_name eq "city"}
                  &lt;p class="required text"&gt;
                      &lt;label for="city_invoice"&gt;{l s='City'} &lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
                      &lt;input type="text" class="text" name="city_invoice" id="city_invoice" value="{if isset($guestInformations) &amp;&amp; $guestInformations.city_invoice}{$guestInformations.city_invoice}{/if}" /&gt;
                  &lt;/p&gt;
  </code></pre>
  
  <p>@Brian correct my code and now working but after several changes of radio button stop working - or working only at first change why?</p>
  
  <pre><code>                &lt;script&gt;
                  $(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();
                      }
                  }
              &lt;/script&gt;
  </code></pre>
  
  <p>You can test live page at: test.detelinmarkov.com/quick-order
  (first you need to add something in cart)</p>
  
  <p>P.s: I try to hide it with pure css but not working.</p>