我在我们的网站上使用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时，所有这些都可以工作， EXCEPT 。我不知道为什么会这样。一旦iCheck进场，DIV就不会出现（或消失）。
任何人都知道使用iCheck进行DIV显示/隐藏的解决方法。
我有一个有效的JSFiddle here。
答案 0 :(得分：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。我在标签元素中使用了 data-attributes 来保存额外信息元素的id