i have a very simple task:
- create the function which finds checkboxes or radiobuttons with data-ui tag
- bind to the label of the checkbox or radiobutton with mouseover and mouse out events
- add class on label hover and remove class by label hover out
and here is my code
var HoverRadioCheck = {
init: function() {
this.findRadioCheckInput();
this.bindToLabel();
},
findRadioCheckInput: function() {
$("input[type='radio'], input[type='checkbox']").find.dataAttr('ui-checkbox', 'ui-radiobutton');
},
bindToLabel: function() {
$("input[type='radio'], input[type='checkbox'] + label").bind( "mouseenter mouseleave", function() {
$( this ).toggleClass( "entered" );
});
}
};
HoverRadioCheck.init();
<div class="form-group">
<input name="checkbox_test_2" id="checkbox_test_2_1" class="checkbox" type="checkbox" data-ui-checkbox/>
<label for="checkbox_test_2_1">Bacon ipsum dolor amet salami andouille corned beef</label>
</div>
<div class="form-group">
<input name="radiobutton_test_1" id="radiobutton_test_1_1" class="radiobutton" type="radio" data-ui-radiobutton/>
<label for="radiobutton_test_1_1">Lorem Ipsum</label>
</div>
Any help would be highly appreciated
Aucun commentaire:
Enregistrer un commentaire