Bootstrap复选框,单选框美化特效

所属分类:输入-选择框

 125085  373  查看评论 (20)
分享到微信朋友圈
X
Bootstrap复选框,单选框美化特效 ie兼容9

使用方法

引入css

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/build.css">
js
<script type="text/javascript">
    function changeState(el) {
        if (el.readOnly) el.checked=el.readOnly=false;
        else if (!el.checked) el.readOnly=el.indeterminate=true;
    }
</script>

相关插件-选择框

vue选择检索国家页面模板(原创)

vue.js基于json异步调用可选择并且可以通过国家名称和手机区号进行检索相应的国家,并且有中文、日语、英语、越南语、韩语、五种语言,这些语言的显示是根据游览器语言而定。代码比较容易理解,用起来很方便。(支持多语言自适应手机和网站)
  选择框
 22852  271

复选框全选反选取消(界面有点难看,但功能绝对OK)

可实现全选框全选反选取消等,选了可删除。需引用jqueryDOM结构浅显易改。
  选择框
 30094  330

JQ表单选择插件

插件包含单选按钮、复选框以及下拉选择菜单的功能,样式美化可自己编写css
  选择框
 56175  314

仿造中国移动商城联动筛选特效

商城筛选特效,分类页
  选择框
 41767  480

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

    用户5566251159 0
    2019/10/31 15:24:26
    为什么 √变成了 口?
        西瓜0
        2019/10/31 16:01:33
        那因该是字符图标样式没有调用好。
    回复
    Eileen 0
    2019/3/21 18:42:41
    为什么我点击input 获取不到 选中的. 回复
    烈日追风 0
    2018/12/24 15:57:11
    为什么 √变成了 口?
        傻杰。0
        2022/7/11 10:36:07
        这不是坑人吗
    回复
    ?着星星看月亮 0
    2018/9/22 17:29:10
    移动端多选框会出现未选中的状态,谷歌浏览器模拟手机没有问题
        ?着星星看月亮0
        2018/9/22 17:42:08
        换了种颜色,然后问题消失了,很奇怪
    回复
    ??泻弦豢 0
    2018/8/31 20:58:06

    我发现了一个bug,就是这样的代码片段如果把第一个单选按钮的checked去掉,所有单选按钮都会变成选中状态,且勾变成了一条横线,难道只有我看出来吗?代码如下:

    <div class="checkbox checkbox">
        <input type="radio" name="radio4" id="radio7" value="option1" checked>
        <label for="radio7">
            Default
        </label>
    </div>
    <div class="checkbox checkbox-success">
        <input type="radio" name="radio4" id="radio8" value="option2">
        <label for="radio8">
            Success
        </label>
    </div>
    <div class="checkbox checkbox-danger">
        <input type="radio" name="radio4" id="radio9" value="option3">
        <label for="radio9">
             Danger
        </label>
    </div>
        ??泻弦豢1
        2018/8/31 21:08:35

        楼主在build.css中多写了一段代码,把这段代码去掉就能正常显示了,不能上传照片那就代码吧,希望对各位码农有所帮助。

        .checkbox-info input[type="checkbox"]:indeterminate + label::after,.checkbox-info input[type="radio"]:indeterminate + label::after {
        	background-color:#fff;
        }
    回复
    vn 0
    2018/8/15 13:48:45
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/build.css">
    </head>
    
    <body>
        <input type="radio" class="radio-primary" name="a1" onclick="changeState(this)" />11
        <input type="radio" class="radio-primary" name="a1" onclick="changeState(this)" />12
        <script type="text/javascript">
            function changeState(el) {
                if (el.readOnly) el.checked = el.readOnly = false;
                else if (!el.checked) el.readOnly = el.indeterminate = true;
            }
        </script>
    </body>

    我想问下为什么没效果?

    回复
    yuanweidong 0
    2018/6/22 9:33:22
    你好,我想问下作者点击后为啥会出现个小的阴影,这个能解决吗? 回复
    ※镜子明★ 0
    2017/11/21 15:37:05
    雨田君 0
    2017/11/21 9:47:44

    作者,一个页面不能应用多个吗??为什么失灵了。。

        blue0
        2018/6/21 15:15:03
        id具有唯一性,换成不同的id
    回复
    北港初晴、 0
    2017/9/12 20:26:52

    我用了一下 他有两个勾?

        Lilium。0
        2017/11/17 9:38:58

        。。。。。。。。你是一点网页都没学吧?去掉checked不就行了

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复