mardi 25 octobre 2016

Hover functionality for Checkbox and Radiobutton with data-ui tag

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