jquery implements custom checkbox and radio Styles _jquery

1, causes

Recently in the work to implement a custom radio style, and we usually use the default style, because they do not know how to solve the method, so began to search, and finally saw a good solution, can be a perfect solution to the problems we encountered.

2, principle

We all know that in the writing structure, radio or checkbox will follow the label together, the label for the attribute value and input ID value of the same case, click on the label can select input, here is the use of label To cover our input default style, by adding a background image to the label (beautify checkbox or radio), that is, in the process of clicking, we do not see the default input (to input settings z-index:-1), and click on the label, Load different background images through different events (here is the position to change the background picture)

3, set the default style to beautify the checkbox or radio

(1) Page structure

<form class= "form" method= "POST" > <fieldset> <legend>which genres do you like?</legend> <input type= "checkbox" value= "Action" id= "check-1" name= "genre" ><label for= "check-1" "class=" ">action" adventure</label> <input type= "checkbox" value= "comedy" "Id=" check-2 "name=" genre "><label for=" check-2 "Class=" ">Comedy</label> <input type=" checkbox "value=" Epic "id=" check-3 "name=" genre "><label for= "Check-3" "class=" ">Epic/Historical</label> <input type=" checkbox "value=" Science "id=" check-4 "Name=" Gen Re "><label for=" check-4 "class=" ">science fiction</label> <input type=" checkbox "value=" Romance "id = "check-5" name= "genre" ><label for= "check-5" class= "" >Romance</label> <input type= "checkbox" value 
  = "Western" id= "check-6" name= "genre" ><label for= "check-6" class= "" >Western</label> </fieldset> <fieldset> <legend>caDdyshack is the greatest movie of all time, right?</legend> <input type= "Radio" value= "1" id= "radio-1" Name= " Opinions "><label for=" radio-1 "class=" ">Totally</label> <input type=" Radio "value=" 1 "id=" Radio-2 " Name= "Opinions" ><label for= "radio-2" class= "" >you must be kidding</label> <input "type=" Radio "1" id= "radio-3" name= "opinions" ><label for= "radio-3" class= "" >what ' s caddyshack?</label> </
 Fieldset> </form>

  (2) jquery code (prerequisites must be introduced into the jquery library)

JQuery.fn.customInput = function () {$ (this). each (the function (i) {if ($ (this). is (' [Type=checkbox],[type=radio] ')) {
      var input = $ (this);
      Get the associated label using the input ' s ID var label = $ (' label[for= ' +input.attr (' id ') + '] '); Get type,for classname suffix var inputtype = (input.is (' [Type=checkbox] '))?
      ' checkbox ': ' Radio '; Wrap the input + label in a div $ (' <div class= ' custom-' + inputtype + ' "></div> '). InsertBefore (input). AP
      Pend (Input,label); Find all inputs in this set using the shared name attribute var allinputs = $ (' input[name= ' +input.attr (' name ') + '] '
      ); necessary for browsers so don ' t support The:hover pseudo class on Labels label.hover (function () {$
        ). addclass (' hover ');
        if (InputType = = ' checkbox ' && input.is (': Checked ')) {$ (this). addclass (' Checkedhover ');
      }},function () {$ (this). Removeclass (' hover checkedhover ');
});       
      Bind custom event, trigger it, bind Click,focus,blur events input.bind (' Updatestate ', function () { if (input.is (': Checked ')) {if (Input.is (': Radio ')) {Allinputs.each (function () {$ (' L
            Abel[for= ' +$ (This). attr (' id ') + '] '. Removeclass (' checked ');
          });
          };
        Label.addclass (' checked ');
        else {label.removeclass (' checked checkedhover checkedfocus ');
      }). Trigger (' Updatestate '). Click (function () {$ (this). Trigger (' updatestate ');
        ). focus (function () {label.addclass (' focus ');
        if (InputType = = ' checkbox ' && input.is (': Checked ')) {$ (this). addclass (' Checkedfocus ');
      }). blur (function () {Label.removeclass (' focus Checkedfocus ');        
    });
}
  });
 }

After introducing the jquery library and introducing the above code, you can execute the following code

$ (' input '). Custominput ();

(3) generated outer div

If your code structure is label and input in pairs, then a DIV will be generated on their outer layers, as shown

(4) Set the custom default style

Prepare a picture, as follows:

You may ask why it is not at the top, but there is a certain distance, because our input options are mostly centered, and we are using the background image of the label to simulate, so we are in order to let the input option center display. In short: ICO small icon must be arranged vertically, must leave a certain distance to achieve the center display.

/* Wrapper divs
      /* Custom-checkbox,
      . custom-radio {
        position:relative;
        Display:inline-block;
      }
      /* input, label positioning *
      /Custom-checkbox input,
      . Custom-radio input {
        position:absolute
        ; left:2px;
        top:3px;
        margin:0;
        Z-index:-1;
      }
      . Custom-checkbox label,
      . Custom-radio label {
        display:block;
        position:relative;
        z-index:1;
        Font-size:1.3em;
        Padding-right:1em;
        line-height:1;
        padding: 5em 0 5em 30px;
        margin:0 0 3em;
        Cursor:pointer;
      }

This is the outermost set of some, and of course you can modify it yourself

 * = = Default state effect = * */custom-checkbox Label {background:url (Images/checkbox. 
      GIF) no-repeat; 
      }. Custom-radio Label {background:url (images/button-radio.png) no-repeat;
      }. Custom-checkbox label,. Custom-radio label {background-position:0px 0px; }

/*== mouse hover and get focus state ==*/
      . Custom-checkbox label.hover,
      . Custom-checkbox label.focus,
      . Custom-radio Label.hover,
      . Custom-radio label.focus {
        /*background-position: -10px-114px;*/
      }/*==
      
      selected status ==*/
      . Custom-checkbox label.checked,
      . Custom-radio label.checked {
        background-position:0px-47px;
      }
      . Custom-checkbox Label.checkedhover,
      . Custom-checkbox label.checkedfocus {
        /*background-position: -10px- 314px;*/
      }
      custom-checkbox Label.focus,
      . Custom-radio label.focus {outline:1px
        dotted #ccc;
      }

End: In short, I was the perfect solution to my problem, by the way screenshots send a look at

The above mentioned is the entire content of this article, I hope you can enjoy.