iCheck and toggle DIV (скрыть/показать) не работают хорошо

Question

Я использую iCheck на нашем веб-сайте, но у меня возникают проблемы, когда я хочу использовать DIV для переключения дополнительной информации о продукт.

Я пробовал много вещей, но все без успеха. Я создал короткую версию проблемы, которую я испытываю. Смотри ниже.

jQuery('input').iCheck({ 
     inheritID: true, 
     checkboxClass: 'icheckbox_square-blue', 
     radioClass: 'iradio_square-blue', 
     increaseArea: '20%' 
    }); 

function updateConfigurableOptions(i, billingCycle) { 

    jQuery.post("cart.php", 'a=cyclechange&ajax=1&i='+i+'&billingcycle='+billingCycle, 
     function(data) { 
      jQuery("#productConfigurableOptions").html(jQuery(data).find('#productConfigurableOptions').html()); 
      jQuery('input').iCheck({ 
       inheritID: true, 
       checkboxClass: 'icheckbox_square-blue', 
       radioClass: 'iradio_square-blue', 
       increaseArea: '20%' 
      }); 
     } 
    ); 
    recalctotals(); 

} 

И

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<script src="http://neverlands.org/icheck/icheck.min.js"></script> 
<link href="http://neverlands.org/icheck/icheck/square/blue.css" rel="stylesheet"/> 

<div class="product-configurable-options" id="productConfigurableOptions"> 
     <div class="row"> 
      <div class="col-sm-12"> 
       <div class="form-group"> 
        <label for="dont-target-this"></label> 

        <div class="webhostconfigopties"> 
         <label for="dont-target-this">What kind of product do you want?</label> 
        </div><br> 
        <label class="" id="Product A - Normal/Standard product" name="Product A - Normal/Standard product"> 
         <div style="position: relative;" class="iradio_square-blue"> 
         <input style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" name="configoption[5]" value="15" type="radio"> 
         <ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div> 
         Product A - Normal/Standard product 
        </label> 
<br /> 
        <label class="" id="Product B - Special order +2 weeks time" name="Product B - Special order +2 weeks time"> 
         <div style="position: relative;" class="iradio_square-blue"> 
         <input style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" name="configoption[5]" value="14" type="radio"> 
         <ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div> 
         Product B - Special order +2 weeks time 
        </label> 
       </div> 
      </div> 

<p><hr></p> 

       <div class="form-group"> 
        <label for="dont-target-this"></label> 

        <div class="webhostconfigopties"> 
         <label for="dont-target-this">Do you want something extra to it?</label> 
        </div><br> 
        <label class="" id="No, thank you. Nothing extra." name="No, thank you. Nothing extra."> 
         <div style="position: relative;" class="iradio_square-blue"> 
         <input style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" name="configoption[5]" value="15" type="radio"> 
         <ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div> 
         No, thank you. Nothing extra. 
        </label> 
<br /> 
        <label class="" id="Yes, I want one extra option." name="Yes, I want one extra option."> 
         <div style="position: relative;" class="iradio_square-blue"> 
         <input style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" name="configoption[5]" value="14" type="radio"> 
         <ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div> 
         Yes, I want one extra option. 
        </label> 

<br /> 
        <label class="" id="Yes, I want all possible extra options. This will take longer." name="Yes, I want all possible extra options. This will take longer."> 
         <div style="position: relative;" class="iradio_square-blue"> 
         <input style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" name="configoption[5]" value="14" type="radio"> 
         <ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div> 
         Yes, I want all possible extra options. This will take longer. 
        </label> 
       </div> 
      </div> 


     </div> 
    </div> 

       <p></p> 

<div id="addinfo-product-a" style="font-size:32px;color:red;"> 
    Additional information in regards to product A 
</div> 

<div id="addinfo-product-b" style="font-size:32px;color:green;"> 
    Additional information in regards to product B 
</div> 

<div id="addinfo-extraoption-b" style="font-size:32px;color:blue;"> 
    Additional information in regards to extra option 2 
</div> 

<div id="addinfo-extraoption-c" style="font-size:32px;color:brown;"> 
    Additional information in regards to extra option 3 
</div> 

Включенные JQuery имеет важное значение для iCheck, однако я начинаю думать, что также является причиной проблем. Может быть, кто-то, кто понимает JQuery/JS, может решить эту проблему?

Единственное, чего я пытаюсь достичь, - это получить соответствующий DIV (с дополнительной информацией о продукте). Я бы предпочел использовать fadein/fadeout для переключения.

В любом случае, я попробовал несколько вещей/решений, которые были найдены в Google и в Stackoverflow. Все они работают, ЗА ИСКЛЮЧЕНИЕМ при использовании iCheck. Я не знаю, почему это так. Как только iCheck будет играть, DIV не появится (или уйдет).

Любой знает обходное решение, чтобы сделать/показать DIV в сочетании с iCheck.

У меня есть рабочий JSFiddle here.

Answer 1

Захват ifChecked и ifUnchecked событий на входных элементах и ​​переключение дополнительных элементов информации в функции обратного вызова.

$('input').on('ifChecked', function(event){ 
    var extraInformationId = $(this).closest('label').attr('data-extrainformationid'); 
    if(extraInformationId != undefined) { 
     $('#' + extraInformationId).fadeIn(500); 
    } 
}); 

Пожалуйста, смотрите обновленный jsfiddle here.

P.S. Я использовал данные-атрибуты в метке элемент для хранения идентификатора элемента дополнительной информации