iCheck 和 toggle DIV's (hide/show) 不能很好地协同工作

Question

我在我们的网站上使用 iCheck，但是当我想使用切换按钮 (hide/show) 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 和 Whosebug 上找到的方法/解决方案。当您使用 iCheck 时，所有这些都有效，EXCEPT。我不知道为什么会这样。只要 iCheck 开始运行，DIV 就不会出现（或消失）。

任何人都知道与 iCheck 一起制作 DIV show/hide 的解决方法。

我有一个可用的 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。我在 label 元素中使用了 data-attributes 来保存额外信息元素的 id

iCheck 和 toggle DIV's (hide/show) 不能很好地协同工作

iCheck and toggle DIV's (hide/show) don't work well together

jquery

fadeout

fadein

icheck