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 对于 iCheck 来说是必不可少的，但我开始认为这也是问题的原因。也许懂JQuery/JS的人可以解决这个问题？

我想要实现的唯一目标是显示相应的 DIV（包含有关产品的其他信息）。我更喜欢使用淡入/淡出而不是切换。

无论如何，我尝试了一些在 Google 和 Stackoverflow 上找到的东西/解决方案。所有这些都有效，除了当您使用 iCheck 时。我不知道为什么会这样。一旦 iCheck 开始运行，DIV 就不会出现（或消失）。

任何人都知道与 iCheck 结合使用 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。

附：我在 label 元素中使用了 data-attributes 来保存额外信息元素的 id