jQuery操作checkbox详解

最新推荐文章于 2021-08-22 09:12:50 发布
最新推荐文章于 2021-08-22 09:12:50 发布
阅读量429 收藏
点赞数
分类专栏： My work notes
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rainbow_m/article/details/50629253
版权
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">     
  2. <HTML>     
  3.  <HEAD>     
  4.   <TITLE> New document．nbsp;</TITLE>     
  5.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     
  6.     <SCRIPT LANGUAGE="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>     
  7.   <SCRIPT LANGUAGE="javascript">     
  8.   <!--     
  9.    $("document．quot;).ready(function(){     
  10.          
  11.     $("#btn1").click(function(){     
  12.           
  13.     $("[name='checkbox']").attr("checked",'true');//全选     
  14.        
  15.     })     
  16.        $("#btn2").click(function(){     
  17.           
  18.     $("[name='checkbox']").removeAttr("checked");//取消全选     
  19.        
  20.     })     
  21.     $("#btn3").click(function(){     
  22.           
  23.     $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数     
  24.        
  25.     })     
  26.     $("#btn4").click(function(){     
  27.           
  28.     $("[name='checkbox']").each(function(){     
  29.           
  30.         
  31.      if($(this).attr("checked"))     
  32.    {     
  33.     $(this).removeAttr("checked");     
  34.          
  35.    }     
  36.    else    
  37.    {     
  38.     $(this).attr("checked",'true');     
  39.          
  40.    }     
  41.         
  42.     })     
  43.        
  44.     })     
  45.      $("#btn5").click(function(){     
  46.     var str="";     
  47.     $("[name='checkbox'][checked]").each(function(){     
  48.      str+=$(this).val()+""r"n";     
  49.    //alert($(this).val());     
  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>     
----------------------------------------------------------------------------------------------------
<!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  runat = "server" >
     < title ></ title >
     < script  src = "Scripts/jquery-1.7.min.js"  type = "text/javascript" ></ script >
     < script  type = "text/javascript" >
         $(function () {
             // 全选
             $("#btnCheckAll").bind("click", function () {
                 $("[name = chkItem]:checkbox").attr("checked", true);
             });
 
             // 全不选
             $("#btnCheckNone").bind("click", function () {
                 $("[name = chkItem]:checkbox").attr("checked", false);
             });
 
             // 反选
             $("#btnCheckReverse").bind("click", function () {
                 $("[name = chkItem]:checkbox").each(function () {
                     $(this).attr("checked", !$(this).attr("checked"));
                 });
             });
 
             // 全不选
             $("#btnSubmit").bind("click", function () {
                 var result = new Array();
                 $("[name = chkItem]:checkbox").each(function () {
                     if ($(this).is(":checked")) {
                         result.push($(this).attr("value"));
                     }
                 });
 
                 alert(result.join(","));
             });
         });
     </ script >
</ head >
< body >
     < div >
         < input  name = "chkItem"  type = "checkbox"  value = "今日话题"  />今日话题
         < input  name = "chkItem"  type = "checkbox"  value = "视觉焦点"  />视觉焦点
         < input  name = "chkItem"  type = "checkbox"  value = "财经"  />财经
         < input  name = "chkItem"  type = "checkbox"  value = "汽车"  />汽车
         < input  name = "chkItem"  type = "checkbox"  value = "科技"  />科技
         < input  name = "chkItem"  type = "checkbox"  value = "房产"  />房产
         < input  name = "chkItem"  type = "checkbox"  value = "旅游"  />旅游
     </ div >
     < div >
         < input  id = "btnCheckAll"  type = "button"  value = "全选"  />
         < input  id = "btnCheckNone"  type = "button"  value = "全不选"  />
         < input  id = "btnCheckReverse"  type = "button"  value = "反选"  />
         < input  id = "btnSubmit"  type = "button"  value = "提交"  />
     </ div >
</ body >
</ html >




rainbow_m
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery中对CheckBox的操作
saiwu123的博客
01-16 76
1.获取所有name='notify'的选中的checkbox的值 var notifyAry =[]; var textAry=[]; $("input:checkbox[name='"+notify+"']:checked").each(function(){        var me=$(this);       notifyAry.push(me.val());      ...
jQuery操作checkbox选择
weixin_33672109的博客
11-07 103
1、checkbox list选择 效果图： 代码： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/199...
jQuery操作radio和checkbox（赋值取值和绑定事件）
zyy_jay的专栏
03-10 1161
为了兼容ie FF chrome等主流浏览器，对事件部分作了修改： [b]radio的赋值和事件操作[/b] [code="javascript"] // 绑定radio单击方法 $("input[type='radio']").bind("click", function(e) { var theEvent = window.event || e; var theO...
jQuery操作checkbox选择checked
webnoties的专栏
12-09 1294
代码：?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/x
JQuery高级操作详解
小皮皮LL的博客
08-22 768
文章目录JQuery高级操作详解1.动画2.遍历3.事件绑定4.插件 文章目录JQuery高级操作详解1.动画2.遍历3.事件绑定4.插件 JQuery高级操作详解 1.动画 三种方式显示和隐藏元素： 默认显示和隐藏方式 show([speed,[easing],[fn]])。（显示） hide([speed,[easing],[fn]])。（隐藏） toggle([speed,[easing],[fn]])。（在显示和隐藏之间切换） 三个参数： 1.speed：动画的速度。三个预定义的值(“s
jQuery实现checkbox全选、反选及删除等操作的方法详解
10-16
主要介绍了jQuery实现checkbox全选、反选及删除等操作的方法,结合实例形式形式详细分析了jQuery针对checkbox多选按钮常见批量操作相关实现技巧,需要的朋友可以参考下
用Jquery获取checkbox多个选项详解
05-10
用Jquery获取checkbox多个选项详解、详细讲解jQuery获取checkbox,新手必看
jQuery表单选择器用法详解
12-01
jQuery(“:checkbox”) 　2. 选择所有元素和类型为复选框的元素 3. :checked Selector 　1. jQuery(“:checked”) 　2. 选择所有有勾选的元素 4. :disabled Selector 　1. jQuery(“disabled”) 　2. 选择所有被...
jQuery树插件zTree使用方法详解
11-27
最近要做一个树结构，就使用了jQuery 的树插件，感觉还不错，做个随笔 页面的基本结构是这样的 这里的样式是使用了metroStyle文件夹里的类bootstrap风格，当然首先... ZTREE DEMO - checkbox</title> <link
jquery的map与get方法详解
12-11
var ww=$.map(arrayObj,function(i){ return i; }).join(“,”);console.log(ww);var tt=$(“:checkbox”).map(function(){ return this.value;...jQuery下有个概念叫“类数组”，比如$(“:checkbox
jquery中unbind和bind的用法
史大姐的博客
09-13 2294
JQuery中bind和unbind函数 2017-09-13  Hierj937v...  转自 闫志飞166 修改 微信分享： 测试： 页面代码：           JQuery代码： $().ready(function(){       for (var i = 0; i     
bootstrap使用(弹窗实现/弹出窗口数据不更新)
热门推荐
rainbow_m的博客
07-24 4万+
在星云直播项目中初次使用的bootstrap，在这之前也只是听说，并未实际使用 为了方便下次使用时查找，在此简单记录一下 bootstrap实现弹出窗口： 效果如图 channel_info_list.jsp页面        data-toggle="modal"         data-target="#addChannelInfoModal"  href="
Java 格式化时间获取小时和分钟 并按照24小时制
rainbow_m的博客
08-03 1万+
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm"); Time pro = rs.getTime("program_time"); String curtime = sdf.format(pro); 格式时: yyyy表示年，如2013； MM表示月，如12； dd表示天，如31； hh表示用12小时制，如7；
jQuery 操作列表批量删除数据
rainbow_m的博客
02-03 8428
方式一： //判断全选复选框是否选中(全选和取消全选)       $( "#allcbx").bind("click" ,function(){              var ck=$("input[name=allcbx]" ).attr("checked");              if(ck == "checked" ){
java使用Xstream注解 解析xml文件 并将数据导入MySql数据库中
rainbow_m的博客
08-19 3423
需要解析的xml文件如下： java类一一xml文件的第一层 java类一一xml文件的第二层 java类一一xml文件的第三层 java类一一xml文件的第四层 xml转化工具类: public class ParseXmlUtil { /** * 序列化对象为XML字符串 *  * @param channels 对象 *
客户端传值到服务器中文乱码
rainbow_m的博客
07-24 2809
项目笔记（星云）——移动端接口 处理中文乱码问题：（客户端页面通过url地址传值为中文 到服务端，导致中文乱码） 这将涉及到字符解码操作，我们在应用中常常会用new String(fieldType.getBytes("iso-8859-1"), "UTF-8");等类似的方法去解码。但这种方式受具体应用环境限制，往往在应用部署环境发生改变时，还会出现中文乱码。 这里介绍一种
jquery 设置checkbox选中
最新发布
05-31
在 jQuery 中，可以通过以下方式设置 checkbox 的选中状态： 1. 使用 `prop()` 方法获取 checkbox 的 jQuery 对象。 2. 调用 `prop()` 方法并传入 checked 属性的值，来设置 checkbox 的选中状态。 下面是一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值