Question
I currently have a form that attaches a class to a inputs label when an option has been selected. I had it working beautifully prior to using the iCheck plugin. I'm essentially running through a series of parents in order to find the class '.frmLabel' and adding a class of '.frmLabelChecked' to it. It works for my select and text inputs but it's not working for the radio and check buttons.
From what I can see the iCheck plugin add an additional div element for form styling so it seems to be that adding an additional parent() would fix the issue. It's a little messy but this is the best I can do since the widget I'm using is being pulled in dynamically.
Live examples can be found here: http://bvp.dmediastudios.com and the version without icheck (that works) is here http://bvp.dmediastudios.com/v4/
The code is as follows:
https://stackoverflow.com/questions/17113759
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian $('.frmInput input[type=radio]').click(function () {
// buy or lease options, have to seperate functions for each option since the html structure is different for each one so a all size fits solution using parent() is not possible (that I know of) - very lame. BETTER DONE THAN PERFECT!
if ($('.frmInput input[type=radio]').is(':checked')) {
// parent(1) = #harwidget, parent(2) = #homefinderform, parent(3) .frmRow - find .frmLabel
$(this).parent().parent().parent().parent().find('.frmLabel').addClass('frmLabelChecked');
}
});
The checkbox code
$('#divBuyType').on('click', 'input:checkbox', function () {
$(this).parent().parent().parent().parent().find('.frmLabel').toggleClass('frmLabelChecked', this.checked);
});
The non-working version can be found here: bvp.dmediastudios.com, the working version (without iCheck) can be found here: bvp.dmediastudios.com/v4/
Here is the block of html that the above function refers to
<div id="mywidget3A0A581997704AA41EB19FFEC804E593" style="text-align:left;">
<div style="width:450px;height:520px;" id="widgetOuter">
<div id="widgetContainer">
<div class="widgetHeader" style="display: none;">
<div class="widgetRight">
<div class="widgetMidd">
<div class="widgetTitle">Home Finder</div>
<div class="widgetBackBtn" id="hartab3A0A581997704AA41EB19FFEC804E593" style="display:none;">
<img src="" onclick="showSearch('3A0A581997704AA41EB19FFEC804E593')" style="cursor:pointer;">
</div>
<div class="titleBar" id="titleBar3A0A581997704AA41EB19FFEC804E593"></div>
</div>
</div>
</div>
<div class="widgetBody">
<span id="widgetBodyDiv" style="height:438px;" onscroll="fixTip('3A0A581997704AA41EB19FFEC804E593');">
<div id="harwidget3A0A581997704AA41EB19FFEC804E593" style="padding: 10px; display: block;">
<form name="homefinderform" method="get" class="forms" id="homefinderform">
<div class="frmRow">
<div class="frmLabel">Buy or Lease :</div>
<div class="frmInput">
<span>
<div class="iradio_minimal-grey checked" style="position: relative;">
<input type="radio" name="For_Sale" value="1" checked="" onclick="showBuyDiv(this)" class="radioButton" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Buy</span>
<span>-</span>
<span>
<div class="iradio_minimal-grey" style="position: relative;">
<input type="radio" name="For_Sale" value="0" onclick="showLeaseDiv(this)" class="radioButton" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Lease</span>
</div>
</div>
<div class="frmRow">
<div class="frmLabel">Property Type</div>
<div class="frmInput">
<div id="divBuyType">
<span>
<div class="icheckbox_minimal-grey checked" style="position: relative;">
<input name="PROPERTY_CLASS_ID" value="1" type="checkbox" style="width: 20px; position: absolute; opacity: 0;" checked="">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Single Family Homes
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROPERTY_CLASS_ID" value="2" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Townhouse/Condo
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROPERTY_CLASS_ID" value="6" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Highrise Condominium
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROPERTY_CLASS_ID" value="3" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Residential Lots & Land
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROPERTY_CLASS_ID" value="4" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Multi-Family
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROPERTY_CLASS_ID" value="5" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Homes and/or Acreage</span>
</div>
<div id="divLeaseType" style="display:none;">
<span>
<div class="icheckbox_minimal-grey checked" style="position: relative;">
<input name="PROP_TYPE" value="'SGL'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;" checked="">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Single Family Homes
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROP_TYPE" value="'THC'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Townhouse/Condo
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROP_TYPE" value="'HIR'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Highrise Condominium
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROP_TYPE" value="'LOT'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Residential Lots & Land
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROP_TYPE" value="'MLT'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Multi-Family
<div class="br">
<br>
</div>
<div class="icheckbox_minimal-grey" style="position: relative;">
<input name="PROP_TYPE" value="'ACR'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>Homes and/or Acreage
<div class="br">
<br>
</div>
</span>
</div>
</div>
</div>
<!--Start Select Fields-->
Any help would be appreciated. It might be easier to view the html on the page itself.
Solution
If anyone else uses this plugin and needs to fire off some type of event using a radio or checkbox use this.
$('input').on('ifChecked', function(event){
alert(event.type + ' callback');
});
Documentation can be found here: https://github.com/fronteed/iCheck
