jquery 操作checkbox的例子(全选,反选,获取选取值)

最新推荐文章于 2021-07-02 15:55:42 发布
最新推荐文章于 2021-07-02 15:55:42 发布
阅读量137 收藏
点赞数
分类专栏： 项目问题收集 文章标签： jQuery HTML Blog ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhjh17426/article/details/83399018
版权
jquery 操作checkbox的例子(全选,反选,获取选取值)
2008-12-22 18:08
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<HTML>
3 <HEAD>
4 <TITLE> New Document </TITLE>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6 <link href="css/ingrid.css" rel="stylesheet" type="text/css">
7<script language="JavaScript" src="jquery-1.2.3.pack.js" type="text/javascript"></script>
8 <SCRIPT LANGUAGE="JavaScript">
9 <!--
10 $("document").ready(function(){
11
12 $("#btn1").click(function(){
13
14 $("[name='checkbox']").attr("checked",'true');//全选
15
16 })
17 $("#btn2").click(function(){
18
19 $("[name='checkbox']").removeAttr("checked");//取消全选
20
21 })
22 $("#btn3").click(function(){
23
24 $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
25
26 })
27 $("#btn4").click(function(){
28
29 $("[name='checkbox']").each(function(){
30
31
32 if($(this).attr("checked"))
33 {
34 $(this).removeAttr("checked");
35
36 }
37 else
38 {
39 $(this).attr("checked",'true');
40
41 }
42
43 })
44
45 })
46 $("#btn5").click(function(){
47 var str="";
48 $("[name='checkbox'][checked]").each(function(){
49 str+=$(this).val()+"\r\n";
50 })
51 alert(str);
52 })
53 })
54 //-->
55 </SCRIPT>
56
57 </HEAD>
58
59 <BODY>
60 <form name="form1" method="post" action="">
61 <input type="button" id="btn1" value="全选">
62 <input type="button" id="btn2" value="取消全选">
63 <input type="button" id="btn3" value="选中所有奇数">
64 <input type="button" id="btn4" value="反选">
65 <input type="button" id="btn5" value="获得选中的所有值">
66 <br>
67 <input type="checkbox" name="checkbox" value="checkbox1">
68 checkbox1
69 <input type="checkbox" name="checkbox" value="checkbox2">
70 checkbox2
71 <input type="checkbox" name="checkbox" value="checkbox3">
72 checkbox3
73 <input type="checkbox" name="checkbox" value="checkbox4">
74 checkbox4
75 <input type="checkbox" name="checkbox" value="checkbox5">
76 checkbox5
77 <input type="checkbox" name="checkbox" value="checkbox6">
78 checkbox6
79 <input type="checkbox" name="checkbox" value="checkbox7">
80 checkbox7
81 <input type="checkbox" name="checkbox" value="checkbox8">
82 checkbox8
83 </form>
84
85 </BODY>
86</HTML>
87http://hi.baidu.com/godist/blog/item/b28e5924edbadd064c088d8e.html
jquery实现复选框案例
IT小生
05-26 959
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>选择菜单</title> <link href="style_cn.css" rel="stylesheet" type="text/css"> <script src="../js/jquery-1.4.2.js" typ
jquery checkbox全选反选效果代码
12-04
知识点一：使用jQuery实现checkbox全选和反选功能 1. jQuery是一种快速、小巧、功能丰富的JavaScript库，它封装了JavaScript常用的功能代码，极大地简化了JavaScript的开发。 2. checkbox全选和反选是web开发中常见...
JQuery操作checkbox、radio等示例
冷月宫主的专栏
11-22 3198
例：将多个选中的checkbox的值组装成一个字符串function addMem(){//var followers = document.getElementsByName("followers");var f_str = 0;$("input[@name=followers]").each(function(){   if($(this).attr("checked")==tru
html dom反选,Dom操作--全选反选
weixin_29304021的博客
07-02 521
我们经常会在网站上遇到一些多选的情况，下面我就来说说使用Dom写全选反选的思路。全选思路：首先，我们来分析一下知道，当我们点击"全选"复选框的时候，所有的复选框应该都被选中，那我们就可以给"全选"复选框注册一个事件，就是如果全选按钮被选中的话，那么其他所有复选框都被选中；然后就是其他复选框部分选中或全不选中，那么"全选"复选框不选中。反选思路：我们知道，当我们点击反选按钮，那么就把除"全选"之外的...
jquery获取checkbox选中的值
热门推荐
FurtherSkyQ的博客
03-07 3万+
&lt;html&gt; &lt;head&gt; &lt;meta charset="gbk"&gt; &lt;!-- 引入JQuery --&gt; &lt;script src="jquery-1.3.1.js" type="text/javascript"&gt;&lt;/script&gt
input[type='checkbox']全选反选
Be myself
01-17 6986
input[type='checkbox']全选反选，在开发过程中经常遇到，为了方便，在此总结一下，并做函数封装。 未封装 html代码 <label class="labelAll"><input type="checkbox" name="" value=""><span>全选</span></label> <labe...
jquery 操作checkbox的例子(全选,反选,获取选取值...)
记事本
05-16 1871
1、 New Document <!-- $("document").ready(function(){ $("#btn1").click(function(){ $("[name='checkbox']").attr("checked",'true');//全选
input 多选框 获取值 全选 反选
梧桐落叶~~
09-28 794
input 多选框 获取值 全选 反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
jQuery操作 checkbox 的全选、反选 , radio, select 功能
zxcvbn546的专栏
11-07 139
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关 设置： 获取一组radio被选中项的值：var item = $(’input[name=items][checked]‘).val(); 获取select被选中项的文本var item = $(”select[@name=items] option[@...
Jquery实现全选反选和省城市联动效果
赵同学的博客
01-14 284
jquery在目前的应用面非常广泛，这里写下来日常需要用到一些小功能。以便大家方便获取，喜欢的收藏哟 第一次发布时间2021年1月14日22：43 复选框的正选与反选 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.
jquery、js操作checkbox全选反选
10-26
以上就是使用 jQuery 和 JavaScript 操作 checkbox 全选和反选的基本方法。在实际应用中，你可以根据需要调整这些函数，例如添加事件监听器，使得全选/反选按钮可以触发这些功能。在网页开发中，这样的功能能够显著...
Jquery CheckBox全选方法代码附js checkbox全选反选代码
11-30
在jQuery库的帮助下，这个任务变得非常简单和直观，正如标题“Jquery CheckBox全选方法代码附js checkbox全选反选代码”所示。这里我们将详细讲解如何使用jQuery实现全选和反选的功能，并对比JavaScript的实现方式。...
jQuery实现checkbox列表的全选、反选功能
11-26
总的来说，这个例子巧妙地利用了jQuery的事件绑定和自定义属性，实现了复选框列表的全选和反选功能，同时保持了代码的高封装性和低耦合性。这种设计模式使得代码可复用性强，易于维护，并且减少了HTML和JavaScript...
mysql alter 语句用法,添加、修改、删除字段等
zhjh17426的专栏
11-06 207
mysql alter 语句用法,添加、修改、删除字段等 //主键549830479 alter table tabelname add new_field_id int(5) unsigned default 0 not null auto_increment ,add primary key (new_field_id); //增加一个新列549830479 ...
mysql数据库自动定期备份的脚本
zhjh17426的专栏
07-30 191
说明： 保留每天备份的数据是件不太现实的事，做好的做法是保留前三天的 备份数据。把备份的数据打包并压缩，文件名以系统时间命名，打包后的 备份文件放在一个特定的文件夹下面，实际上，只要是以时间命名备份文件， ls 命令后，文件将自动按时间排序的，这样就可以方便的删除三天以前的备份文件，于是 就保证了服务器上每天都保留着最近三天的数据库备份 #/usr/bin/dbbackup #! /...
CVS的日常使用
zhjh17426的专栏
07-22 151
一个项目的首次导入 cvs import -m "write some comments here" project_name vendor_tag release_tag 执行后：会将所有源文件及目录导入到/path/to/cvsroot/project_name目录下 vender_tag: 开发商标记 release_tag: 版本发布标记 项目导出：将代码从CVS库里导出 cvs che...
struts2 捕获404错误
zhjh17426的专栏
11-28 130
当访问一个不存在页面时，一般显示404错误，这是一个很不友好的页面，很多网站都会让应用捕获这个404错误，并跳到指定的友好页面。在struts2中你可以按下面方法进行设置： 在struts.xml中添加： /pages/error.html 其中： 指明了当访问的链接不存在时，默认指向 pageNotFund 请求。 pageNotFund...
Advanced SiteMesh
zhjh17426的专栏
07-14 102
假设你打算结合多种技术来构建一个企业级web站点。比如，你准备采用J2EE技术往你的web站点里添加新内容，而这个系统的其他部分是用CGI或者微软的IIS Server搭建的。 在这种情况下，怎样让你的应用系统从外观和感受(look and feel)上保持一致呢？一种办案就是采用J2EE技术全部重写，然后选用一种框架，比如Struts-Tiles，但这种办案的开发成本太高，不太现实。另一种可选...
jQuery实现Checkbox全选、反选及获取选中值
该资源主要介绍如何在网页中使用Checkbox（复选框...通过以上代码，你可以实现在一个列表中对Checkbox的全选、全不选、反选操作，并能方便地获取到用户选定的Checkbox的值。这在开发涉及多选功能的网页应用时非常实用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值