`
suliuyes
  • 浏览: 92484 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

jquery处理复选框

 
阅读更多

项目中操作checkbox是经常碰到的,有了jquery后操作起来简单明了,代码如下:

Js代码   收藏代码
  1. $( function() {  
  2.   
  3.     //全选  
  4.     $("#selectAll").click( function() {  
  5.         $("input[name='send-mail']").each( function() {  
  6.             $(this).attr("checked"true);  
  7.         });  
  8.     });  
  9.     // 反选  
  10.     $("#inverseAll").click( function() {  
  11.         $('input[name="send-mail"]').each( function() {  
  12.             $(this).attr("checked", !$(this).attr("checked"));  
  13.         });  
  14.     });  
  15.   
  16.     // 取消全部  
  17.     $("#deselectAll").click( function() {  
  18.         $("input[name='send-mail']").each( function() {  
  19.             $(this).attr("checked"false);  
  20.         });  
  21.     });  
  22.   
  23.     // 选中的值  
  24.     $("#sendMailAll").click( function() {  
  25.         var selectedStr = "";  
  26.         var $sendMail = $("input[name='send-mail']");  
  27.         $sendMail.each( function() {  
  28.             if ($(this).attr("checked")) {  
  29.                 selectedStr += $(this).val() + ",";  
  30.             }  
  31.         });  
  32.         if ($.trim(selectedStr) == "") {  
  33.             alert("请未选中任何数据!");  
  34.             return false;  
  35.         }  
  36.                alert(selectedStr );  
  37.           
  38.     });  
  39.   
  40. });  

 其页面部分代码如下:

Html代码   收藏代码
  1. <div>  
  2.    <s:iterator value="page.result">  
  3.     <tr>  
  4.             <td><input type="checkbox" name="send-mail" id="send-mail-id-${sendMailId}" value="${sendMailId}"/></td>  
  5.     </tr>   
  6.     </s:iterator>  
  7. </div>  
  8. <div id="footer-checkbox"  style="width: 100%; margin-left: 260px;">  
  9. <input type="button" id="selectAll" name="selectAll" value="全选" />  
  10. <input type="button" id="inverseAll" name="inverseAll" value="反选" />  
  11. <input type="button" id="deselectAll" name="deselectAll" value="取消" />  
  12. <input type="button" id="sendMailAll" name="sendMailAll" value="发送" />  
  13. </div>  

 在使用前,记得将jquery引进

Js代码   收藏代码
  1. <script src="js/jquery.js" type="text/javascript"></script>  
 

 

     $("document").ready(function(){
       $("#btn1").click(function(){
            $("[name='checkbox']").attr("checked",'true');//全选
        })
       $("#btn2").click(function(){
          $("[name='checkbox']").removeAttr("checked");//取消全选
       })
       $("#btn3").click(function(){
          $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
       })
       $("#btn4").click(function(){
          $("[name='checkbox']").each(function(){//反选
              if($(this).attr("checked")){
                $(this).removeAttr("checked");
            }
            else{
                $(this).attr("checked",'true');
            }
          })
       })
      $("#btn5").click(function(){//输出选中的值
       var str="";
          $("[name='checkbox'][checked]").each(function(){
              str+=$(this).val()+"\r\n";
            //alert($(this).val());
          })
         alert(str);
       })
      })
 

 

分享到:
评论

相关推荐

    jQuery高性能带复选框的树形结构插件

    highchecktree是一款使用指定源数据生成带复选框的树形结构的jQuery插件。该树形结构插件对于在大数据的处理上性能十分出色。它使用懒加载的形式来提供性能,子节点会在点击时才去加载数据。

    jQuery自定义单选按钮复选框样式特效.zip

    &lt;form&gt; 单选框 &lt;i class='input_style radio_bg'&gt;&lt;input type="radio" name="hot" ... 这是一款通过jQuery特效来改变单选按钮 复选框样式,将它们进行美化处理的网页特效,适合新手,代码量非常少。

    jQuery自定义单选按钮复选框样式特效

    这是一款通过jQuery特效来改变单选按钮 复选框样式,将它们进行美化处理的网页特效,适合新手,代码量非常少。

    JQuery复选框全选效果如何实现

    如何获取所有复选框:document.getElementsByName、 需求分析 ​ 在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理 技术分析 第一种方法:选择器[属性名称=’属性值’] $(“input[type=’checkbox’]:...

    复选框只能选择2个,多选无效果且弹窗提示(事件代理)进行处理

    appen新加div后,如果用原先的$("d")来获取点击事件,将无效,因为新加的内容未绑定事件,应该采取动态获得点击事件,事件代理。里面有简约代码段,比较好理解,不懂可以私聊哦

    jquery处理checkbox(复选框)是否被选中实例代码

    主要介绍了jquery处理checkbox(复选框)是否被选中实例代码的相关资料,需要的朋友可以参考下

    iCheck自定义复选框和单选按钮组件(jQuery)

    iCheck自定义复选框和单选按钮组件(jQuery),它避免在日常开发中重复造轮子,在数量庞大的浏览器,设备和它们的不同版本中,它提供了风格一致的外观。回调和方法可以用来方便地处理修改和自定义输入。兼容主流...

    jqm-inline-multiselect:在 jquery mobile 中使用复选框组来表示多选

    jqm-内联-多选一个插件,可让您使用复选框组在 jquery mobile 中表示多选。 演示: : 为什么? 我有一个存在于弹出窗口中的 jQM 表单,我需要在这里使用多选。 多选需要使用 jQM 样式,但这是不可能的,因为 jQM 将...

    JQuery实现列表中复选框全选反选功能封装(推荐)

    在做列表时经常会遇到全选,反选进行批量处理问题。通过本文给大家介绍JQuery实现列表中复选框全选反选功能封装,对jq复选框全选反选功能感兴趣的朋友一起看看吧

    在jquery repeater中添加设置日期,下拉,复选框等控件

    http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar 本文将详细的讲解 Repeater 控件的模板中如何处理控件, 目录如下: * 准备 * html 元素 * 文本框 * 下拉框 * 多行文本框 * 复选框 * jQueryUI 插件 ...

    iCheck:高度可定制的复选框和单选按钮-开源

    用于 jQuery 和 Zepto 的高度可定制的复选框和单选按钮。 jQuery 和 Zepto JavaScript 库支持单个文件。 iCheck 像构造函数一样使用复选框和单选按钮。 它用一个 div 包装每个输入,该 div 可以由您自定义或使用可用...

    flipswitch:用于复选框和收音机的 jQuery 翻转开关

    用于复选框和收音机的 jQuery flipSwitch()。 重写以使用名为 lightSwitch ( ) 的旧废弃插件处理当前版本的 jQuery。 此外,它使用 Keith Woods backgroundPosition 插件( )用于跨浏览器目的 用法 &lt;input type=...

    jQuery攻略.pdf

    81 第4章 表单验证 82 4.1 确认必需字段不留空 82 4.2 验证数字字段 84 4.3 验证电话号码 88 4.4 验证用户ID 90 4.5 验证日期 92 4.6 验证电子邮件地址 94 4.7 检查复选框是否被选中 96 4.8 检查单选按钮是否被选中 ...

    Selectionz:一个用于创建风格化的 jQuery 插件和复选框元素

    选择z Selectionz 是一个 jQuery 插件,用于创建风格化的下拉菜单、复选框和单选按钮元素。 它挂钩到 &lt;select&gt; 您选择的元素,隐藏它们并使用描述性 CSS 类创建一堆 HTML 元素,因此您可以设置它们的样式并...

    icheck:高度可定制的复选框和单选按钮(jQuery和Zepto)

    单个文件支持jQuery和Zepto JavaScript库屏幕阅读器可访问的输入-VoiceOver等的属性轻量级—已压缩1 kb 自定义复选框和单选按钮的以处理更改以编程进行更改的将更改保存到原始输入,与任何选择器一起使用怎么运行的...

    jQuery 3.3.1.zip

    jQuery是一款免费且开放源代码的JS代码库,由John Resig创建,它是轻量级的js库,兼容CSS3,兼容各种浏览器(IE6.0 , FF1.5 , Safari2.0 , ...恢复:触发器复选框和广播单击事件相同;恢复:添加无线电点击触发测试。

    marionette-checkbox-behavior:将复选框与模型字段同步的木偶行为

    复选框元素的 jQuery 选择器 modelField :(必需)模型属性名称 兼容性 v2.0.0 及更高版本 执照 麻省理工学院许可证 (MIT) 版权所有 (c) 2015 Rafee Memon 特此授予任何人免费获得本软件副本和相关文档文件(...

    超实用的jQuery代码段

    2.12 如何选中页面上的所有复选框 2.13 禁用表单的回车键提交 2.14 禁用右键单击上下文菜单 2.15 IE下禁用文本选择功能 2.16 输入框获取焦点时文本高亮提示 2.17 实现多个输入框同步操作 2.18 在新窗口中打开外部...

Global site tag (gtag.js) - Google Analytics