jQuery表单元素美化

所属分类:输入-选择框

 32556  394  查看评论 (15)
分享到微信朋友圈
X
jQuery表单元素美化 ie兼容8

更新时间:2020-08-01 21:13:17

更新说明:操作按钮方式一致, 如绑定事件等。 

具体用法如下:

$(function() {
    //单选       
    //selected: 默认选中值 * type: 0 或者 1 两种样式 
    $("input[name='sex']").richradio();
    $("input[name='sex2']").richradio();
    $("input[name='sex3']").richradio({
        selected: "女"
    });
    $("input[name='sex4']").richradio({
        selected: "未知",
        type: "1"
    });
    / /复选
    // allBtn:是否出现全选按钮,默认 false       
    // * checkAll: 全选,默认false        
    // * selected: 默认选中值        
    // * type: 0 或者 1 两种样式  
    $("input[name='xingqu']").richcheckbox();
    $("input[name='xingqu2.aa']").richcheckbox({
        allBtn: true,
        checkAll: true
    });
    $("input[name='xingqu3']").richcheckbox({
        allBtn: true
    });
    $("input[name='xingqu4']").richcheckbox({
        allBtn: true,
        selected: "2,4",
        type: 1
    });
    //下拉框
    //type: single(单选,默认),multi(多选)   
    * selected: 默认选中值 *
        width: 宽度
    $("#mySelect").richselect();
    $("#mySelect2").richselect({
        selected: "搜狐"
    });
    $("#mySelect3").richselect({
        type: "multi",
        placeholder: "hello"
    });
    $("#mySelect4").richselect({
        type: "multi",
        selected: "百度,阿里巴巴",
        width: "300px"
    });
});
//获取单选按钮选中值alert($("input[name='sex2']").getRadioVal());
//获取复选按钮选中值,数组格式alert($("input[name='xingqu4']").getCheckboxVal());   
//获取下拉框选中值,数组格式alert($("#mySelect4").getSelectVal());
相关插件-选择框

jQuery自定义select、单选、复选

jQuery自定义单选、复选插件select.jquery.js
  选择框
 35773  355

不包邮省市选择(不含县)

jQuery选择省市地区,支持多选,单独筛选
  选择框
 27465  344

移动端pc端地区选择插件

兼容移动端的地区选择插件
  选择框
 39567  334

9款表单复选框(Checkbox)与单选按钮美化

9款表单复选框(Checkbox)与单选按钮美化
  选择框
 35123  361

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    超值旅游@微信lxzhe_net 0
    2022/8/19 9:46:32
    有案列,看下是否是一些文件没有加载进来 回复
    画鸿满天 0
    2019/4/25 22:10:52
    CSS样式加载不出来啊
        命运?;丶?0
        2019/5/15 10:19:28
        是不是样式没引入
    回复
    画鸿满天 0
    2019/4/25 21:23:20
    这个怎么用,
        Leo1
        2019/7/4 11:34:05
        将插件导入到本地,更改页面适用性,即可适用,基本上算是插拔式的使用方式
    回复
    0
    2019/3/14 14:39:33
    如何用js去掉选择
        Sou0
        2019/9/5 17:26:03
        remove
        转角1
        2020/8/2 15:11:58
        使用jq或者js,设置按钮的checked属性为false,该插件只是美化样式,其他操作跟原来的一样
        Brave heart0
        2023/5/29 17:13:47
        为什么我设置了 $("input[name='iscoptop']:eq(0)").attr("checked", 'checked'); 没反应呢
        值是改变了 但是样式没变化
    回复
    0
    2019/3/13 20:30:38
    手机上为什么触摸不了
        1645180840
        2019/5/8 9:56:57
        手机上是可以的,你先直接在手机上访问示例。
    回复
    丶KK 0
    2019/3/7 17:42:09
    一开始获取不了默认值,怎么解决哦
        转角0
        2020/8/2 15:16:23
        能贴一下具体代码吗?
    回复
    json_wangqiang 0
    2019/2/26 19:54:01
    name值写成 abc[] 这样的形式就不行了? 回复
    ___??。 0
    2019/2/14 14:38:03
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复