首页>>表单>>jquery 各种不同效果的自定义美化input radio checkbox 单选框和复选框美化(2013-12-21)

jquery 各种不同效果的自定义美化input radio checkbox 单选框和复选框美化

jquery 各种不同效果的自定义美化input radio checkbox 单选框和复选框美化
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="content">  
  2.   
  3.     <div class="content-box">  
  4.       <!-- classic -->  
  5.       <label class="wLabel-left">Classic:</label>  
  6.       <input id="radio-test1_1" tabindex="6" type="radio" name="radio-test1" value="one" checked="checked" /><label for="radio-test1_1">one</label>  
  7.       <input id="radio-test1_2" tabindex="6" type="radio" name="radio-test1" value="two" /><label for="radio-test1_2">two</label>  
  8.       <input id="radio-test1_3" tabindex="6" type="radio" name="radio-test1" value="three" /><label for="radio-test1_3">three</label>  
  9.       <input id="radio-test1_4" tabindex="6" type="radio" name="radio-test1" value="four" /><label for="radio-test1_4">four</label>  
  10.       <br/>  
  11.       <label class="wLabel-left"></label>  
  12.       <input id="radio-test2_1" tabindex="7" type="radio" name="radio-test2" value="one" /><label for="radio-test2_1">one</label>  
  13.       <input id="radio-test2_2" tabindex="7" type="radio" name="radio-test2" value="two" checked="checked" /><label for="radio-test2_2">two</label>  
  14.       <input id="radio-test2_3" tabindex="7" type="radio" name="radio-test2" value="three" /><label for="radio-test2_3">three</label>  
  15.       <input id="radio-test2_4" tabindex="7" type="radio" name="radio-test2" value="four" /><label for="radio-test2_4">four</label>  
  16.       <br/>  
  17.       <label class="wLabel-left"></label>  
  18.       <input id="radio-test3_1" tabindex="8" type="radio" name="radio-test3" value="one" /><label for="radio-test3_1">one</label>  
  19.       <input id="radio-test3_2" tabindex="8" type="radio" name="radio-test3" value="two" /><label for="radio-test3_2">two</label>  
  20.       <input id="radio-test3_3" tabindex="8" type="radio" name="radio-test3" value="three" checked="checked" /><label for="radio-test3_3">three</label>  
  21.       <input id="radio-test3_4" tabindex="8" type="radio" name="radio-test3" value="four" /><label for="radio-test3_4">four</label>  
  22.       <br/>  
  23.       <label class="wLabel-left"></label>  
  24.       <input id="radio-test4_1" tabindex="9" type="radio" name="radio-test4" value="one" /><label for="radio-test4_1">one</label>  
  25.       <input id="radio-test4_2" tabindex="9" type="radio" name="radio-test4" value="two" /><label for="radio-test4_2">two</label>  
  26.       <input id="radio-test4_3" tabindex="9" type="radio" name="radio-test4" value="three" /><label for="radio-test4_3">three</label>  
  27.       <input id="radio-test4_4" tabindex="9" type="radio" name="radio-test4" value="four" checked="checked" /><label for="radio-test4_4">four</label>  
  28.       <br/><br/>  
  29.   
  30.       <label class="wLabel-left"></label>  
  31.       <input id="checkbox-test1_1" tabindex="10" type="checkbox" class="checkbox-test1" checked="checked" /><label for="checkbox-test1_1">one</label>  
  32.       <input id="checkbox-test1_2" tabindex="11" type="checkbox" class="checkbox-test1" /><label for="checkbox-test1_2">two</label>  
  33.       <input id="checkbox-test1_3" tabindex="12" type="checkbox" class="checkbox-test1" /><label for="checkbox-test1_3">three</label>  
  34.       <input id="checkbox-test1_4" tabindex="13" type="checkbox" class="checkbox-test1" /><label for="checkbox-test1_4">four</label>  
  35.       <br/>  
  36.       <label class="wLabel-left"></label>  
  37.       <input id="checkbox-test2_1" tabindex="14" type="checkbox" class="checkbox-test2" /><label for="checkbox-test2_1">one</label>  
  38.       <input id="checkbox-test2_2" tabindex="15" type="checkbox" class="checkbox-test2" checked="checked" /><label for="checkbox-test2_2">two</label>  
  39.       <input id="checkbox-test2_3" tabindex="16" type="checkbox" class="checkbox-test2" /><label for="checkbox-test2_3">three</label>  
  40.       <input id="checkbox-test2_4" tabindex="17" type="checkbox" class="checkbox-test2" /><label for="checkbox-test2_4">four</label>  
  41.       <br/>  
  42.       <label class="wLabel-left"></label>  
  43.       <input id="checkbox-test3_1" tabindex="18" type="checkbox" class="checkbox-test3" /><label for="checkbox-test3_1">one</label>  
  44.       <input id="checkbox-test3_2" tabindex="19" type="checkbox" class="checkbox-test3" /><label for="checkbox-test3_2">two</label>  
  45.       <input id="checkbox-test3_3" tabindex="20" type="checkbox" class="checkbox-test3" checked="checked" /><label for="checkbox-test3_3">three</label>  
  46.       <input id="checkbox-test3_4" tabindex="21" type="checkbox" class="checkbox-test3" /><label for="checkbox-test3_4">four</label>  
  47.       <br/>  
  48.       <label class="wLabel-left"></label>  
  49.       <input id="checkbox-test4_1" tabindex="22" type="checkbox" class="checkbox-test4" /><label for="checkbox-test4_1">one</label>  
  50.       <input id="checkbox-test4_2" tabindex="23" type="checkbox" class="checkbox-test4" /><label for="checkbox-test4_2">two</label>  
  51.       <input id="checkbox-test4_3" tabindex="24" type="checkbox" class="checkbox-test4" /><label for="checkbox-test4_3">three</label>  
  52.       <input id="checkbox-test4_4" tabindex="25" type="checkbox" class="checkbox-test4" checked="checked" /><label for="checkbox-test4_4">four</label>  
  53.       <br/><br/>  
  54.   
  55.       <!-- radial -->  
  56.       <label class="wLabel-left">Radial:</label>  
  57.       <input type="radio" tabindex="26" name="radio-test5" value="one" data-label="one" checked="checked" />  
  58.       <input type="radio" tabindex="26" name="radio-test5" value="two" data-label="two" />  
  59.       <input type="radio" tabindex="26" name="radio-test5" value="three" data-label="three" />  
  60.       <input type="radio" tabindex="26" name="radio-test5" value="four" data-label="four" />  
  61.       <br/>  
  62.       <label class="wLabel-left"></label>  
  63.       <input type="radio" tabindex="27" name="radio-test6" value="one" data-label="one" />  
  64.       <input type="radio" tabindex="27" name="radio-test6" value="two" data-label="two" checked="checked" />  
  65.       <input type="radio" tabindex="27" name="radio-test6" value="three" data-label="three" />  
  66.       <input type="radio" tabindex="27" name="radio-test6" value="four" data-label="four" />  
  67.       <br/>  
  68.       <label class="wLabel-left"></label>  
  69.       <input type="radio" tabindex="28" name="radio-test7" value="one" data-label="one" />  
  70.       <input type="radio" tabindex="28" name="radio-test7" value="two" data-label="two" />  
  71.       <input type="radio" tabindex="28" name="radio-test7" value="three" data-label="three" checked="checked" />  
  72.       <input type="radio" tabindex="28" name="radio-test7" value="four" data-label="four" />  
  73.       <br/>  
  74.       <label class="wLabel-left"></label>  
  75.       <input type="radio" tabindex="29" name="radio-test8" value="one" data-label="one" />  
  76.       <input type="radio" tabindex="29" name="radio-test8" value="two" data-label="two" />  
  77.       <input type="radio" tabindex="29" name="radio-test8" value="three" data-label="three" />  
  78.       <input type="radio" tabindex="29" name="radio-test8" value="four" data-label="four" checked="checked" />  
  79.       <br/><br/>  
  80.   
  81.       <label class="wLabel-left"></label>  
  82.       <input type="checkbox" tabindex="30" class="checkbox-test5" data-label="one" checked="checked" />  
  83.       <input type="checkbox" tabindex="31" class="checkbox-test5" data-label="two" />  
  84.       <input type="checkbox" tabindex="32" class="checkbox-test5" data-label="three" />  
  85.       <input type="checkbox" tabindex="33" class="checkbox-test5" data-label="four" />  
  86.       <br/>  
  87.       <label class="wLabel-left"></label>  
  88.       <input type="checkbox" tabindex="34" class="checkbox-test6" data-label="one" />  
  89.       <input type="checkbox" tabindex="35" class="checkbox-test6" data-label="two" checked="checked" />  
  90.       <input type="checkbox" tabindex="36" class="checkbox-test6" data-label="three" />  
  91.       <input type="checkbox" tabindex="37" class="checkbox-test6" data-label="four" />  
  92.       <br/>  
  93.       <label class="wLabel-left"></label>  
  94.       <input type="checkbox" tabindex="38" class="checkbox-test7" data-label="one" />  
  95.       <input type="checkbox" tabindex="39" class="checkbox-test7" data-label="two" />  
  96.       <input type="checkbox" tabindex="40" class="checkbox-test7" data-label="three" checked="checked" />  
  97.       <input type="checkbox" tabindex="41" class="checkbox-test7" data-label="four" />  
  98.       <br/>  
  99.       <label class="wLabel-left"></label>  
  100.       <input type="checkbox" tabindex="42" class="checkbox-test8" data-label="one" />  
  101.       <input type="checkbox" tabindex="43" class="checkbox-test8" data-label="two" />  
  102.       <input type="checkbox" tabindex="44" class="checkbox-test8" data-label="three" />  
  103.       <input type="checkbox" tabindex="45" class="checkbox-test8" data-label="four" checked="checked" />  
  104.       <br/><br/>  
  105.   
  106.       <!-- inset -->  
  107.       <label class="wLabel-left">Inset:</label>  
  108.       <input type="radio" tabindex="46" name="radio-test9" value="one" data-label="one" checked="checked" />  
  109.       <input type="radio" tabindex="46" name="radio-test9" value="two" data-label="two" />  
  110.       <input type="radio" tabindex="46" name="radio-test9" value="three" data-label="three" />  
  111.       <input type="radio" tabindex="46" name="radio-test9" value="four" data-label="four" />  
  112.       <br/>  
  113.       <label class="wLabel-left"></label>  
  114.       <input type="radio" tabindex="47" name="radio-test10" value="one" data-label="one" />  
  115.       <input type="radio" tabindex="47" name="radio-test10" value="two" data-label="two" checked="checked" />  
  116.       <input type="radio" tabindex="47" name="radio-test10" value="three" data-label="three" />  
  117.       <input type="radio" tabindex="47" name="radio-test10" value="four" data-label="four" />  
  118.       <br/>  
  119.       <label class="wLabel-left"></label>  
  120.       <input type="radio" tabindex="49" name="radio-test11" value="one" data-label="one" />  
  121.       <input type="radio" tabindex="49" name="radio-test11" value="two" data-label="two" />  
  122.       <input type="radio" tabindex="49" name="radio-test11" value="three" data-label="three" checked="checked" />  
  123.       <input type="radio" tabindex="49" name="radio-test11" value="four" data-label="four" />  
  124.       <br/>  
  125.       <label class="wLabel-left"></label>  
  126.       <input type="radio" tabindex="50" name="radio-test12" value="one" data-label="one" />  
  127.       <input type="radio" tabindex="50" name="radio-test12" value="two" data-label="two" />  
  128.       <input type="radio" tabindex="50" name="radio-test12" value="three" data-label="three" />  
  129.       <input type="radio" tabindex="50" name="radio-test12" value="four" data-label="four" checked="checked" />  
  130.       <br/><br/>  
  131.   
  132.       <label class="wLabel-left"></label>  
  133.       <input type="checkbox" tabindex="51" class="checkbox-test9" data-label="one" checked="checked" />  
  134.       <input type="checkbox" tabindex="52" class="checkbox-test9" data-label="two" />  
  135.       <input type="checkbox" tabindex="53" class="checkbox-test9" data-label="three" />  
  136.       <input type="checkbox" tabindex="54" class="checkbox-test9" data-label="four" />  
  137.       <br/>  
  138.       <label class="wLabel-left"></label>  
  139.       <input type="checkbox" tabindex="55" class="checkbox-test10" data-label="one" />  
  140.       <input type="checkbox" tabindex="56" class="checkbox-test10" data-label="two" checked="checked" />  
  141.       <input type="checkbox" tabindex="57" class="checkbox-test10" data-label="three"/>  
  142.       <input type="checkbox" tabindex="58" class="checkbox-test10" data-label="four" />  
  143.       <br/>  
  144.       <label class="wLabel-left"></label>  
  145.       <input type="checkbox" tabindex="59" class="checkbox-test11" data-label="one" />  
  146.       <input type="checkbox" tabindex="60" class="checkbox-test11" data-label="two" />  
  147.       <input type="checkbox" tabindex="61" class="checkbox-test11" data-label="three" checked="checked" />  
  148.       <input type="checkbox" tabindex="62" class="checkbox-test11" data-label="four" />  
  149.       <br/>  
  150.       <label class="wLabel-left"></label>  
  151.       <input type="checkbox" tabindex="63" class="checkbox-test12" data-label="one" />  
  152.       <input type="checkbox" tabindex="64" class="checkbox-test12" data-label="two" />  
  153.       <input type="checkbox" tabindex="65" class="checkbox-test12" data-label="three" />  
  154.       <input type="checkbox" tabindex="66" class="checkbox-test12" data-label="four" checked="checked" />  
  155.   
  156.       <link rel="Stylesheet" type="text/css" href="./wCheck.css" />  
  157.       <script type="text/javascript" src="./wCheck.min.js"></script>  
  158.         
  159.       <script type="text/javascript">  
  160.         $('input:radio[name=radio-test1]').wRadio({theme: 'circle-classic-red', selector: 'circle-dot-red'});  
  161.         $('input:radio[name=radio-test2]').wRadio({theme: 'circle-classic-green', selector: 'circle-dot-green'});  
  162.         $('input:radio[name=radio-test3]').wRadio({theme: 'circle-classic-blue', selector: 'circle-dot-blue'});  
  163.         $('input:radio[name=radio-test4]').wRadio({theme: 'circle-classic-yellow', selector: 'circle-dot-yellow'});  
  164.   
  165.         $('input.checkbox-test1').wCheck({theme: 'square-classic-red', selector: 'checkmark'});  
  166.         $('input.checkbox-test2').wCheck({theme: 'square-classic-green', selector: 'cross'});  
  167.         $('input.checkbox-test3').wCheck({theme: 'square-classic-blue', selector: 'plus'});  
  168.         $('input.checkbox-test4').wCheck({theme: 'square-classic-yellow', selector: 'triangle'});  
  169.   
  170.         $('input:radio[name=radio-test5]').wRadio({theme: 'circle-radial-red', selector: 'checkmark'});  
  171.         $('input:radio[name=radio-test6]').wRadio({theme: 'circle-radial-green', selector: 'cross'});  
  172.         $('input:radio[name=radio-test7]').wRadio({theme: 'circle-radial-blue', selector: 'plus'});  
  173.         $('input:radio[name=radio-test8]').wRadio({theme: 'circle-radial-yellow', selector: 'triangle'});  
  174.   
  175.         $('input.checkbox-test5').wCheck({theme: 'square-radial-red', selector: 'circle', highlightLabel: true});  
  176.         $('input.checkbox-test6').wCheck({theme: 'square-radial-green', selector: 'circle-solid', highlightLabel: true});  
  177.         $('input.checkbox-test7').wCheck({theme: 'square-radial-blue', selector: 'square', highlightLabel: true});  
  178.         $('input.checkbox-test8').wCheck({theme: 'square-radial-yellow', selector: 'square-solid', highlightLabel: true});  
  179.           
  180.         $('input:radio[name=radio-test9]').wRadio({theme: 'circle-inset-red', selector: 'circle', highlightLabel: true});  
  181.         $('input:radio[name=radio-test10]').wRadio({theme: 'circle-inset-green', selector: 'circle-solid', highlightLabel: true});  
  182.         $('input:radio[name=radio-test11]').wRadio({theme: 'circle-inset-blue', selector: 'square', highlightLabel: true});  
  183.         $('input:radio[name=radio-test12]').wRadio({theme: 'circle-inset-yellow', selector: 'square-solid', highlightLabel: true});  
  184.   
  185.         $('input.checkbox-test9').wCheck({theme: 'square-inset-red', selector: 'square-dot-red', highlightLabel: true});  
  186.         $('input.checkbox-test10').wCheck({theme: 'square-inset-green', selector: 'square-dot-green', highlightLabel: true});  
  187.         $('input.checkbox-test11').wCheck({theme: 'square-inset-blue', selector: 'square-dot-blue', highlightLabel: true});  
  188.         $('input.checkbox-test12').wCheck({theme: 'square-inset-yellow', selector: 'square-dot-yellow', highlightLabel: true});  
  189.       </script>  
  190.     </div>  
  191.   </div>  

 


原文地址:http://www.freejs.net/article_biaodan_191.html