代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Jquery模拟多选框(checkbox)</title>

    <style>

        body,div,input{margin:0;padding:0;}

        body{margin-top:100px;font-size:12px;}

        i,em{font-style:normal;}

        .grow-checked-list{text-align:center;}

        .grow-checked-list .checkbox_item{position:relative;display:inline-block;margin-right:10px;height:16px;}

        .checkbox_item input{position:absolute;top:-9999px;left:-9999px;}

        .checkbox_item .check_label{display:inline-block;cursor:default;}

        .checkbox_icon{display:block;float:left;margin-right:5px;width:16px;height:16px;background:url(img/checkbox_icon.png) 0 0;}

        .check_label.on .checkbox_icon{background-position:-16px 0;}

        .checkbox_text{float:left;height:16px;line-height:16px;}

    </style>

</head>

<body>

<div class="grow-checked-list">

    <span class="checkbox_item">

        <input type="checkbox" />

        <label class="check_label on">

            <i class="checkbox_icon "></i>

            <em class="checkbox_text">项目一</em>

        </label>

    </span>

<span class="checkbox_item">

        <input type="checkbox" />

        <label class="check_label">

            <i class="checkbox_icon"></i>

            <span class="checkbox_text">项目二</span>

        </label>

    </span>

<span class="checkbox_item">

        <input type="checkbox" />

        <label class="check_label">

            <i class="checkbox_icon"></i>

            <span class="checkbox_text">项目三</span>

        </label>

    </span>

</div>

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

<script src="js/checkbox.js" type="text/javascript"></script>

<script type="text/javascript">

    $(".check_label").checkbox();

</script>

</body>

</html>
checkbox.js如下：
;(function($){

    $.fn.extend({

        checkbox : function(){

            return this.each(function(){

                var $this = $(this);

                if($this.hasClass("on")){

                    $this.siblings("input").prop("checked","checked");

                }else{

                    $this.siblings("input").removeAttr("checked");

                }

                $this.on("click",function(){

                    if($this.hasClass("on")){

                        $this.siblings("input").removeAttr("checked");

                        $this.removeClass("on");

                    }else{

                        $this.siblings("input").prop("checked","checked");

                        $this.addClass("on");

                    }

                });

            });

        }

    });

})(jQuery);

Jquery模拟多选框(checkbox)的更多相关文章

  1. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  2. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  3. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...

  4. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  5. Jquery操作复选框(CheckBox)的取值赋值实现代码

    赋值 复选框 CheckBox 遍历 取值  1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $(&q ...

  6. Jquery对复选框CheckBox的操作

    checkbox: 多选框 //获取选中值  checkbox:$("#checkbox_id").attr("value"): 多选框checkbox,打勾: ...

  7. jquery获取复选框checkbox的值

    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的optio ...

  8. jQuery 操作复选框(checkbox) attr checked不起作用

    参考资料 http://www.paobuke.com/develop/javascript/pbk849.html   这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 ...

  9. jquery操作复选框(checkbox)的一些小技巧总结

    1.获取单个checkbox选中项(三种写法) //第一种 $("input:checkbox:checked").val() //第二种 $("input:[type= ...

随机推荐

  1. win10上如何启用或禁用Windows功能

    Windows10上提供了很多的功能,比如打印服务.传真服务.媒体服务等,怎样启用或禁用某些Windows功能呢? 工具/原料   windows10 方法/步骤     点击左下角的Windows图 ...

  2. 【ZJOI2012】灾难

    [ZJOI2012]灾难 阿米巴是小强的好朋友. 阿米巴和小强在草原上捉蚂蚱.小强突然想,如果蚂蚱被他们捉灭绝了,那么吃蚂蚱的小鸟就会饿死,而捕食小鸟的猛禽也会跟着灭绝,从而引发一系列的生态灾难. 学 ...

  3. 【CQOI2017】小Q的表格

    [CQOI2017]小Q的表格 稍加推导就会发现\(f(a,b)=a\cdot b\cdot h(gcd(a,b))\). 初始时\(h(n)=1\). 询问前\(k\)行\(k\)列时我们就反演: ...

  4. AttributeError: 'list' object has no attribute 'keys'

    #encoding=utf-8 import os result = {} if os.path.exists("test.txt"): day_file = open(" ...

  5. 3、原生jdbc链接数据库之锁与事务

    一.锁的概念1.作用:是保证数据的一致性,只能一个人修改数据,不能同时多用户修改2.分类:行级锁和表级锁   乐观锁和悲观锁 二.事务1.为了保证数据的一致性和完整性,让数据库的多项操作合并为一个整体 ...

  6. DVR登录绕过漏洞(CVE-2018-9995)

    ###漏洞描述 此漏洞允许攻击者通过修改“Cookie: uid=admin” 之后访问特定 DVR 的控制面板,返回此设备的明文管理员凭证. ###漏洞利用 1.利用代码 curl "ht ...

  7. i春秋-百度杯十月场-EXEC

    进入网站,查看源代码,发现是用vim编辑,而抓包没有有效信息,加参数也无果.百度查了一下vim能形成什么文件.找到答案说,用vim编辑文本xxx.php中途退出,会自动创建一个文件.xxx.php.s ...

  8. CentOS自带定时任务crontab

    设置定时任务规则,crontab -e,如下示例为每一分钟执行一次脚本 在脚本中写入内容时需注意路径,可以写绝对路径,也可以按照如下形式 exepath=$(cd "$(dirname &q ...

  9. LNMP环境

    准备工作:1)把所有的软件安装在/usr/local/,源码包放在/package/,数据:自定义,日志文件:自定义 创建www所属组及用户/usr/sbin/groupadd www/usr/sbi ...

  10. mac sourcetree push分支选中所有tag的时候报错

    错误信息: ....... ! [rejected] 573_0811_stable -> 573_0811_stable (already exists)updating local trac ...