首页 网站特效 PHP/Mysql 网站模板 视频教程 整站源码 云服务器 免责声明

素材码 > 表单代码 > 一款简单实用的jQuery表单元素单选框复选框下拉框美化插件

一款简单实用的jQuery表单元素单选框复选框下拉框美化插件

更新时间:2019-01-30
357058607
一款简单实用的jQuery表单元素单选框复选框下拉框美化插件 应用简介

一款非常简单实用的jQuery表单元素单选框、复选框、下拉框美化插件,本实例有很多种美化效果,具体请查看演示。

js代码

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> 
<script type="text/javascript" src="js/jquery.richUI.min.js"></script> 
<script type="text/javascript" src="js/jquery.browser.min.js"></script> 
<script type="text/javascript"
    $(function() { 
        //单选 
        /* 
        * selected: 默认选中值 
        */
 
        $("input[name='sex']").richradio(); 
        $("input[name='sex2']").richradio(); 
        $("input[name='sex3']").richradio({selected:"2"}); 
         
        //复选 
        /* 
        * allBtn:是否出现全选按钮,默认 false 
        * checkAll: 全选,默认false 
        * selected: 默认选中值 
        */
 
        $("input[name='xingqu']").richcheckbox(); 
        $("input[name='xingqu2']").richcheckbox({allBtn:true, checkAll:true}); 
        $("input[name='xingqu3']").richcheckbox({allBtn:true}); 
        $("input[name='xingqu4']").richcheckbox({allBtn:true, selected:"2,4"}); 
         
        //下拉框 
        /** 
        * type: single(单选,默认),multi(多选) 
        * selected: 默认选中值 
        * width: 宽度 
        * placeholder: 提示文字 
        * 
        **/
 
        $("#mySelect").richselect(); 
        $("#mySelect2").richselect({selected:"3"}); 
        $("#mySelect3").richselect({type:"multi", placeholder:"hello"}); 
        $("#mySelect4").richselect({type:"multi", selected:"4,5", width:"300px"}); 
         
    }); 
</script>


  • 收藏
  • 投诉
评论列表