html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

基于jQuery实现复选框的全选 全不选 反选功能_jquery_

[ ] 已经帮助:人解决问题

本代码是在众多的jQuery复选框功能代码中精选出来的,本人项目中使用的代码,这里分享给大家。p9uHTML5中文学习网 - HTML5先行者学习网

jQuery代码:p9uHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
p9uHTML5中文学习网 - HTML5先行者学习网
        $(function(){ p9uHTML5中文学习网 - HTML5先行者学习网
            $("#checkedAll").click(function(){ p9uHTML5中文学习网 - HTML5先行者学习网
                $('[name=items]:checkbox').attr('checked',true); p9uHTML5中文学习网 - HTML5先行者学习网
            }); p9uHTML5中文学习网 - HTML5先行者学习网
            $("#checkedNo").click(function(){ p9uHTML5中文学习网 - HTML5先行者学习网
                $('[name=items]:checkbox').attr('checked',false); p9uHTML5中文学习网 - HTML5先行者学习网
            }); p9uHTML5中文学习网 - HTML5先行者学习网
            $("#checkedRev").click(function(){ p9uHTML5中文学习网 - HTML5先行者学习网
                $('[name=items]:checkbox').each(function(){ p9uHTML5中文学习网 - HTML5先行者学习网
                    //$(this).attr('checked',!$(this).attr('checked')); p9uHTML5中文学习网 - HTML5先行者学习网
                    this.checked = !this.checked; p9uHTML5中文学习网 - HTML5先行者学习网
                }); p9uHTML5中文学习网 - HTML5先行者学习网
            }); p9uHTML5中文学习网 - HTML5先行者学习网
            $("#send").click(function(){ p9uHTML5中文学习网 - HTML5先行者学习网
               var str = "你选中的是:/r/n"; p9uHTML5中文学习网 - HTML5先行者学习网
               $('[name=items]:checkbox:checked').each(function(){ p9uHTML5中文学习网 - HTML5先行者学习网
                   str += $(this).val()+"/r/n"; p9uHTML5中文学习网 - HTML5先行者学习网
               }); p9uHTML5中文学习网 - HTML5先行者学习网
                alert(str); p9uHTML5中文学习网 - HTML5先行者学习网
            }); p9uHTML5中文学习网 - HTML5先行者学习网
        }); p9uHTML5中文学习网 - HTML5先行者学习网

p9uHTML5中文学习网 - HTML5先行者学习网

HTML代码:p9uHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
p9uHTML5中文学习网 - HTML5先行者学习网
    你爱好的运动是?<br> p9uHTML5中文学习网 - HTML5先行者学习网
    <input type="checkbox" name="items" value="足球"/>足球 p9uHTML5中文学习网 - HTML5先行者学习网
    <input type="checkbox" name="items" value="篮球"/>篮球 p9uHTML5中文学习网 - HTML5先行者学习网
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球 p9uHTML5中文学习网 - HTML5先行者学习网
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br> p9uHTML5中文学习网 - HTML5先行者学习网
    <input type="button" id="checkedAll" value="全 选"/> p9uHTML5中文学习网 - HTML5先行者学习网
    <input type="button" id="checkedNo" value="全不选"/> p9uHTML5中文学习网 - HTML5先行者学习网
    <input type="button" id="checkedRev" value="反 选"/> p9uHTML5中文学习网 - HTML5先行者学习网
    <input type="button" id="send" value="提 交"/>p9uHTML5中文学习网 - HTML5先行者学习网
p9uHTML5中文学习网 - HTML5先行者学习网

小伙伴们使用起来是不是很方便,这也是本人千挑万选出来的,希望能对大家有所帮助。p9uHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助