jquery checkbox全选反选效果代码

2016-02-19 14:37 9 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享jquery checkbox全选反选效果代码，希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发】

运行后查看效果，需要刷新下。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head titlejquery事件2/title script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"/script script type="text/javascript"!-- $(function(){ var v; //全选 $("#Button1").bind("click",function(){ $("[name=item]:checkbox").attr("checked",true); }); //反选 $("#Button2").bind("click",function(){ $("[name=item]:checkbox").attr("checked",false); }); // $("#Button3").bind("click",function(){ $("[name=item]:checkbox").each(function(){ this.checked=!this.checked; }) }); var str=""; $("#Button4").bind("click",function(){ $("[name=item]:checkbox:checked").each(function(){ str+=$(this).val()+"," }) alert("您最喜欢的运动是:"+str); str=""; }) }) // --/script /head body div id="show" div你最喜欢的体育运动是？/div div你的姓名:input id="Text1" type="text" //div div id="title"input id="Checkbox1" name="item" type="checkbox" value="足球" /足球 input id="Checkbox2" name="item" type="checkbox" value="篮球" /篮球 input id="Checkbox3" name="item" type="checkbox" value="兵乓球" /兵乓球 input id="Checkbox4" name="item" type="checkbox" value="游泳" /游泳 /div div id="content" input id="Button1" type="button" value="全选" / input id="Button2" type="button" value="取消反选" //div input id="Button3" type="button" value="反选" / input id="Button4" type="button" value="Click" / /div /body /html

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

来源:http://www.tulaoshi.com/n/20160219/1607379.html

上一篇： JQuery SELECT单选模拟jQuery.select.js
下一篇： JavaScript 实现 Konami Code

看过《jquery checkbox全选反选效果代码》的人还看了以下文章更多>>

jquery checkbox全选反选效果代码 02-19
Jquery 1.42 checkbox 全选和反选代码 02-19
JQUERY CHECKBOX全选,取消全选,反选方法三 02-19
jquery全选,jquery全不选,jquery反选 02-19
checkbox全选/取消全选以及checkbox遍历jQuery实现代码 02-19
jQuery checkbox全选/取消全选实现代码 02-19
jquery checkbox全选、取消全选实现代码 02-19
jquery 弹出公告功能代码 02-19
jquery 实现的全选和反选 02-19
jQuery animate效果演示 02-19

jQuery DIV弹出效果实现代码

标签： Web开发

先上个效果图，可以点击Close按钮或是在遮罩层上任意处点击，就可以关闭弹出层。 HTML代码代码如下: div id='pop-div' style="width: 300px" class="pop-box" h4标题位置/h4 div class="pop-box-body" p 正文内容 /p /div div class='buttonPanel' style="text-align: right" style="text-align: right" input value="Close"...

LazyForm jQuery plugin 定制您的CheckBox

标签： Web开发

打包下载在下面浏览器下测试通过：Firefox, IE7, IE8, Google浏览器。 (IE6还是算了吧），其它浏览器还没试过。目前刚添加了4个皮肤，添加新皮肤非常方便，您可以参考已添加的皮肤图片和css代码，相信您会很快搞定。效果截图：一、在没有使用LazyForm的情况下，在XP下运行截图如下二、使用LazyForm(皮肤Blue)效果如下三、使用L...

jquery tabs的实现代码

标签： Web开发

关键代码：代码如下: $(function(){ $(".tabs li").eq(0).css("background","#499AFF"); $(".tabs div").eq(0).show(); $(".tabsulli").click(function(i){ $(this).css("background","#499AFF").siblings().css("background","#ffffff"); $(".tabs div").eq($("li").index(this)).show().siblings("div").hide(); return false; }) ...

JQUERY复选框CHECKBOX全选,取消全选

标签： Web开发

代码如下: script type="text/javascript" $(function() { $("#checkall").click(function() { $("input[@name='checkname[]']").each(function() { $(this).attr("checked", true); }); }); $("#delcheckall").click(function() { $("input[@name='checkname[]']").each(function() { $(this).attr("checked", false); }); }); ...

jQuery AnythingSlider滑动效果插件

标签： Web开发

打包下载 jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery 的特长是网页效果，因此，它的插件库也多与 UI 有关。 webdesignledger.com 网站推选了2009年度最佳 jQuery 插件，有些插件在本博客中已经有介绍，有些还没有，本文介绍的是：2009年度最佳 jQuery 插件—Anything...

查看更多精彩>>