自定义checkbox选择框和全选功能

来源：互联网发布：英语翻译软件编辑：程序博客网时间：2024/05/20 01:37

效果：

html：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>checkbox</title>    <link rel="stylesheet" href="checkbox.css">    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>    <script type="text/javascript" src="js/checkbox.js"></script></head><body><div id="myCheckbox" style="margin: 100px 0 0 500px;">    <a  class="checkbox checkall"><span class="checkbox-text">全选</span></a>    <a  class="checkbox"><span class="checkbox-text">checkbox1</span></a>    <a  class="checkbox"><span class="checkbox-text">checkbox2</span></a>    <a  class="checkbox"><span class="checkbox-text">checkbox3</span></a></div><script>    CheckBox($("#myCheckbox"), function () {        //回调方法    });</script></body></html>

js:

<script>    CheckBox($("#myCheckbox"), function () {        //回调方法    });</script>

css:

.checkbox {    height: 20px;    margin: 0 15px 0 0;    padding-left: 20px;    background: url(img/checkbox.png) 0 -40px no-repeat;    text-align: left;    cursor: pointer;}.checkbox.checked {    background-position: 0 -60px;}.checkbox .checkbox-text {    position: relative;    top: -3px;    margin-left: 4px;    font-size: 12px;    color: #333;    line-height: 20px;    display: inline-block;}

Checkbox.js:

var CheckBox = function ($container, param) {    //是否全选    function isAll() {        var length = $container.find(".checkbox:not(.checkall)").length;        var curLength = $container.find(".checkbox.checked:not(.checkall)").length;        var $checkall = $container.find(".checkbox.checkall");        length == curLength ? $checkall.addClass("checked") : $checkall.removeClass("checked");    }    //全选    $container.on("click", ".checkbox.checkall", function () {        var $this = $(this);        var $checkbox = $container.find(".checkbox");        $this.hasClass("checked") ? $checkbox.removeClass("checked") : $checkbox.addClass("checked");        if (typeof param == 'function') {            return param();        } else {            //可以自定义param            return;        }    });    //单选    $container.on("click", ".checkbox:not(.checkall)", function () {        var $this = $(this);        $this.hasClass("checked") ? $this.removeClass("checked") : $this.addClass("checked");        isAll();        if (typeof param == 'function') {            return param();        } else {            //可以自定义param            return;        }    });}

阅读全文

0 0