html 多个checkbox复选框只能选择一个

1、说明
html 多个CheckBox复选框只能选择一个

2、思路
把没有选择的CheckBox复选框设置为false，选择的设置为true

3、jQuery版本

 $(function () {
            //获取class="tb_cb"的所以checkbox复选框，绑定单击事件
            $('.tb_cb').find('input[type="checkbox"]').bind('click', function () {
                //只要不是本复选框就设置为false  等于不选中
                $('.tb_cb').find('input[type=checkbox]').not(this).attr("checked", false);
            });
});

4、javascript版本

 window.onload = function () {
            //获取class="tb_cb"的所以checkbox复选框，绑定单击事件
            var obj = document.querySelectorAll('.tb_cb input[type="checkbox"]');
            for (i = 0; i < obj.length; i++) {
                var ch = document.getElementById(obj[i].id);
                ch.onclick = function (ch) {
                    for (i = 0; i < obj.length; i++) {
                        //如果集合中的id不等于当前ch.currentTarget.id,设置为不选中
                        if (obj[i].id != ch.currentTarget.id) {// toElement
                            obj[i].checked = false;
                        }
                        else { //把选中设置为true
                            obj[i].checked = true;
                        }
                    }
                }
            }
        }

5、jQuery插件 调用两种方式都可以
$.fn.SingleSelection('.tb_cb input[type="checkbox"]');
$.Radio('.tb_cb input[type="checkbox"]');

 (function ($) {
            $.fn.SingleSelection = function (options) {
                var obj = document.querySelectorAll(options);
                for (var i = 0; i < obj.length; i++) {
                    var chk = obj[i];
                    chk.addEventListener('click', function () {
                        var that = this;
                        for (var j = 0; j < obj.length; j++) {
                            if (that.id != obj[j].id) {
                                obj[j].checked = false;
                            } else {
                                that.checked = true;
                            }
                        }
                    });
                }
            }
            $.extend({
                Radio: function (options) {
                    var obj = document.querySelectorAll(options);
                    for (var i = 0; i < obj.length; i++) {
                       obj[i].addEventListener('click', function () {
                            for (var j = 0; j < obj.length; j++) {
                                if (this.id != obj[j].id) {
                                    obj[j].checked = false;
                                } else {
                                    this.checked = true;
                                }
                            }
                        });
                    }
                }
            });
        })($);

6、补充 全选/反选
<input id="selectall" type="checkbox" value="全选/反选" />全选/反选
<input type="checkbox" name="fruit" value="111" />
<input type="checkbox" name="fruit" value="2222" />
<input type="checkbox" name="fruit" value="333" />

 window.onload = function () {
            var sall = document.getElementById("selectall");
            var fs = document.getElementsByName("fruit");
            sall.onchange = function () {
                if (this.checked) {
                    for (var i = 0; i < fs.length; i++) {
                        fs[i].checked = true;
                        fs[i].cheched = true;
                    }
                }
                else {
                    for (var i = 0; i < fs.length; i++) {
                        fs[i].checked = false;
                    }
                }
            };
        }