社区学习工具库休闲

简体中文

首页 > web前端 > js教程 > jquery checkbox全选反选效果代码_jquery

jquery checkbox全选反选效果代码_jquery

WBOY

发布： 2016-05-16 18:42:31

原创

848 人浏览过

jquery checkbox全选反选效果代码_jquery

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

<title>jquery事件2</title>

<script src="http://img.jb51.net/jslib/jquery/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> 
 
 
<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>

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

相关标签：

jquery 全选反选

来源：php.cn

上一篇：jquery (show,fadeOut,Animate)简单效果_jquery 下一篇：深入认识javascript中的eval函数_javascript技巧

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

什么是 NullPointerException，如何修复它？

2024-10-22 09:46:29
从新手到程序员：您的旅程从 C 基础知识开始

2024-10-13 13:53:41
使用PHP解锁网络开发：初学者指南

2024-10-12 12:15:51
揭秘 C：为新程序员提供一条清晰简单的道路

2024-10-11 22:47:31
释放您的编码潜力：绝对初学者的 C 编程

2024-10-11 19:36:51
释放你内心的程序员：C 绝对初学者

2024-10-11 15:50:41
使用 C 自动化您的生活：适合初学者的脚本和工具

2024-10-11 15:07:41
PHP 变得简单：Web 开发的第一步

2024-10-11 14:21:21
使用 Python 构建任何东西：释放创造力的初学者指南

2024-10-11 12:59:11
编码的关键：为初学者释放 Python 的力量

2024-10-11 12:17:31

最新问题

使用 Javascript / Jquery 提交表单且不带按钮我试图通过调用JavaScript函数并使用JQUERY/PHP执行表单来提交没有按钮的表单。我希望表单在后端静默执行，而无需重新加载页面。不幸的是，它不断返回JavaScript...

来自于 2024-04-06 14:54:03

0

2

421

如何使用 jquery 检索 HTML 数据表中未选定行的值我试图获取所有未单击按钮的行的值。例如，当我单击第一行上的按钮时，我想检索没有单击的行的值。vartable=document.getElementById("all_d...

来自于 2024-04-05 09:26:49

0

1

1418

需要一个 jquery 脚本，根据最终用户的当前选择从选择框中移动选定的选项我有一个HTML页面，最终用户可以通过选择框元素对我们的项目进行排名。请参阅小提琴来观看简单的演示：https://jsfiddle.net/Balkanlii/ghecv1j8/...

来自于 2024-04-04 18:40:04

0

1

3528

我已经通过书签在纯 CSS 中创建了一个元素。它已创建，但不可见我的代码如下：g=document.createElement('div');g.setAttribute("id","divcontainer&qu...

来自于 2024-04-04 17:27:27

0

1

417

在 Safari/Firefox iOS 上无法发送表单数据这适用于除iOS上的Safari/Firefox之外的所有平台：jQuery("#gform_1").one('submit',function(event){...

来自于 2024-04-04 12:53:48

0

1

303

相关专题

更多>

热门推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1421516
php入门教程之一周学会PHP

4265595
JAVA 初级入门视频教程

2517253
小甲鱼零基础入门学习Python视频教程

506310
PHP 零基础入门教程

861495

最新下载

更多>

网站特效

网站源码

网站素材

前端模板