首页>>表单>>自定义checkbox和radio样式 圆形方形勾号单选和复选(2014-07-16)

自定义checkbox和radio样式 圆形方形勾号单选和复选

自定义checkbox和radio样式 圆形方形勾号单选和复选
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="example"><input id="default" checked="checked" type="checkbox" name="default" value="default"> <label for="default">Enabled</label></div>  
  2.     <div class="example"><input id="default-dis" checked="checked" type="checkbox" disabled="disabled"  name="default" value="default"> <label for="default">Disabled</label></div>  
  3.     dashed:  
  4.     <div class="example"><input id="a" checked="checked" type="checkbox" name="a" value="a"> <label for="a">Enabled</label></div>  
  5.     <div class="example"><input id="a-dis" checked="checked" type="checkbox" disabled="disabled"  name="a" value="a"> <label for="a-dis">Disabled</label></div>  
  6.     stamp:  
  7.     <div class="example"><input id="b" checked="checked" type="checkbox" name="b" value="b"> <label for="b">Enabled</label></div>  
  8.     <div class="example"><input id="b-dis" checked="checked" type="checkbox" disabled="disabled"  name="b" value="b"> <label for="b-dis">Disabled</label></div>  
  9.     round:  
  10.     <div class="example"><input id="c" checked="checked" type="checkbox" name="c" value="c"> <label for="c">Enabled</label></div>  
  11.     <div class="example"><input id="c-dis" checked="checked" type="checkbox" disabled="disabled"  name="c" value="c"> <label for="c-dis">Disabled</label></div>  
  12.     square:  
  13.     <div class="example"><input id="d" checked="checked" type="checkbox" name="d" value="d"> <label for="d">Enabled</label></div>  
  14.     <div class="example"><input id="d-dis" checked="checked" type="checkbox" disabled="disabled"  name="d" value="d"> <label for="d-dis">Disabled</label></div>  
  15.     slim:  
  16.     <div class="example"><input id="e" checked="checked" type="checkbox" name="e" value="e"> <label for="e">Enabled</label></div>  
  17.     <div class="example"><input id="e-dis" checked="checked" type="checkbox" disabled="disabled"  name="e" value="e"> <label for="e-dis">Disabled</label></div>  
  18.     retro:  
  19.     <div class="example"><input id="f" checked="checked" type="checkbox" name="f" value="f"> <label for="f">Enabled</label></div>  
  20.     <div class="example"><input id="f-dis" checked="checked" type="checkbox" disabled="disabled"  name="f" value="f"> <label for="f-dis">Disabled</label></div>  

 

JavaScript Code
  1.    <script type="text/javascript">  
  2.    jQuery(document).ready(function(){   
  3.     $('#default').betterCheckbox();  
  4.     $('#default-dis').betterCheckbox();  
  5.     $('#default-dis').betterCheckbox('disable');  
  6.       
  7.     $('#a').betterCheckbox({boxClass: 'ab', tickClass: 'at', tickInnerHTML: "x"});  
  8.     $('#a-dis').betterCheckbox({boxClass: 'ab', tickClass: 'at', tickInnerHTML: "x"});  
  9.     $('#a-dis').betterCheckbox('disable');  
  10.       
  11.     $('#b').betterCheckbox({boxClass: 'bb', tickClass: 'bt', tickInnerHTML: "approved"});  
  12.     $('#b-dis').betterCheckbox({boxClass: 'bb', tickClass: 'bt', tickInnerHTML: "approved"});  
  13.     $('#b-dis').betterCheckbox('disable');  
  14.       
  15.     $('#c').betterCheckbox({boxClass: 'cb', tickClass: 'ct'});  
  16.     $('#c-dis').betterCheckbox({boxClass: 'cb', tickClass: 'ct'});  
  17.     $('#c-dis').betterCheckbox('disable');  
  18.       
  19.     $('#d').betterCheckbox({boxClass: 'db', tickClass: 'dt'});  
  20.     $('#d-dis').betterCheckbox({boxClass: 'db', tickClass: 'dt'});  
  21.     $('#d-dis').betterCheckbox('disable');  
  22.       
  23.     $('#e').betterCheckbox({boxClass: 'eb', tickClass: 'et', tickInnerHTML: "✓"});  
  24.     $('#e-dis').betterCheckbox({boxClass: 'eb', tickClass: 'et', tickInnerHTML: "✓"});  
  25.     $('#e-dis').betterCheckbox('disable');  
  26.       
  27.     $('#f').betterCheckbox({boxClass: 'fb', tickClass: 'ft', tickInnerHTML: "✔"});  
  28.     $('#f-dis').betterCheckbox({boxClass: 'fb', tickClass: 'ft', tickInnerHTML: "✔"});  
  29.     $('#f-dis').betterCheckbox('disable');  
  30. });  
  31. </script>  

 


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