iCheck並切換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是對I檢查必不可少的，但是我開始以爲也是問題的根源。也許有人，誰瞭解JQuery/JS可以解決這個問題？

我試圖達到的唯一目標就是獲得相應的DIV（以及有關產品的附加信息）。我寧願在切換時使用淡入淡出/淡入淡出。

不管怎樣，我嘗試了幾個在Google和Stackoverflow上找到的東西/解決方案。所有這些工作，當您使用iCheck時，除了。我不知道這是爲什麼。只要iCheck在場，DIV就不會出現（或離開）。

任何人都知道一種解決方法，以使iDIV與DIV一起顯示/隱藏。

我有一個工作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.我已使用數據屬性中的標籤元素用於存放額外信息元素的ID