`

jquery 全选反选 小实例

    博客分类:
  • JS
js 
阅读更多
      //判断checkbox集合中是否有选中的
      $("input[type='checkbox']").is(':checked')

     
     //jquery通过id找到指定表单下的指定input
     var input=$('#form #input');
     或者var input=$('#form').find('#input');都可以。
      
       //验证
       var reg = /^([1-9][0-9]{0,4})$/;
       var maxJoinAll=$("#maxJoinAll").val();
         if(!reg.test(maxJoinAll)){
            $("#maxJoinAll").testRemind("每人最多可提交数只能为正数,最长
                        为4位数");
                        return false;
                    }


      //jquery指定的属性上取值
      //<ul class="index-choose-cardEffect-item flex flex-row-wrap">
     // <li class="flex-50 effect-img" data-id="${item.id}">
       cardEffect = $('.index-choose-cardEffect li') // 卡片
       cardEffect.on('click', function (e) {    alert($(this).data('id'));  
       $("#selectFunCardItemId").val($(this).data('id'));
        cardEffect.removeClass('choosed')
        $(this).addClass('choosed')
    })


 $(function(){
     
        //1方式  全选/全不选
        $("#orChecked").bind("click",function(){
            $("input[name='itemName']:checkbox").prop("checked",this.checked);
        });
        
     //2方式  全选/全不选
    $("#orChecked").bind("click",function(){  
        $("input[name='itemName']").each(function(){
            if($(this).is(":checked")){
                $(this).prop('checked',false)
            }else{
                $(this).prop('checked',true);
            }
        })
    })
    
     //3方式  全选/全不选
    $("#orChecked").click(function(){
                $('[name=itemName]:checkbox').each(function(){  
                    this.checked=!this.checked;
                });
     });  


    });

分享到:
评论

相关推荐

    Jquery 全选反选实例代码

    本文给大家分享一段基于jQuery的全选、反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等)。文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的WEB爱好者...

    JS简单表格列表全选反选代码.zip

    总的来说,"JS简单表格列表全选反选代码"是JavaScript基础应用的一个实例,涉及到事件处理、DOM操作、遍历和逻辑判断等多个核心概念,对于初学者和有一定经验的开发者来说,都是一个很好的学习和参考素材。

    jQuery实现的表格行全选反选单选特效源码.zip

    这个"jQuery实现的表格行全选反选单选特效源码.zip"文件,显然包含了一套实现表格全选、反选和单选功能的jQuery代码示例。以下是对这个知识点的详细讲解: 首先,表格在Web应用中是常见的数据展示方式,全选、反选...

    JQ 全选和反选和取消

    在这个主题下,我们将深入探讨如何实现全选、反选以及取消选择的功能,并结合给出的`demo.html`文件进行实例分析。 1. **全选功能**:全选通常用于一组复选框,例如在一个表格中,用户可以选择全部行。使用jQuery,...

    jQuery Checkbox 全选 反选的简单实例

    本文深入浅出地讲解了如何使用jQuery实现复选框(Checkbox)的全选、全不选和反选功能。这是前端开发中经常遇到的一个需求,特别是在需要批量操作多选框时非常有用。通过具体的实例,本文为读者提供了一套简单易行的...

    checkbox实现全选和反选经典例子

    在高级控件如DataGridView中,通过结合Checkbox可以实现全选和反选功能,为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...

    jQuery实现复选框checkbox全选、反选功能.rar

    本示例中,我们关注的是如何使用jQuery来实现复选框(checkbox)的全选和反选功能,这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中,复选框通常由`&lt;input&gt;`标签定义,类型为...

    jQuery实现全选、反选和不选功能

    本文给大家分享一段基于jQuery的全选、反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等)。文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的WEB爱好者...

    jQuery 全选/反选以及单击行改变背景色实例

    2. 实现全选和反选功能:全选是指选中一组数据中的全部项,而反选则是将当前的选中状态进行切换。在给定的代码中,通过为全选框(checkbox)绑定事件处理函数来实现全选和反选的功能。当全选框的状态发生变化时,...

    jQuery菜单实例(全选,反选,取消)

    总结来说,这个jQuery菜单实例展示了如何利用jQuery简化DOM操作,实现全选、反选和取消的功能。通过选择器和`prop()`方法,我们可以高效地处理大量复选框的状态,使得用户界面更加互动和友好。这种技术在构建动态Web...

    jQuery实现全选、反选和不选功能的方法详解

    本文实例讲述了jQuery实现全选、反选和不选功能的方法。分享给大家供大家参考,具体如下: 适用于网页多选后需要进行批量操作的场景(如批量删除等)。如有问题希望大家可以指正。谢谢~~ HTML 我们的页面上有一个...

    jquery 全选、全不选、反选效果的实现代码【推荐】

    haran.info_jquery实例_全选全不选反选_select-all_unselect-all_reverse&lt;/title&gt; &lt;meta http-equiv="content-type"content="text/html; charset=UTF-8"/&gt; [removed][removed]&lt;!-- 引入Jquery --&gt;...

    JQuery选中checkbox方法代码实例(全选、反选、全不选)

    本文详细介绍了如何使用JQuery来实现对复选框(checkbox)的全选、反选、全不选操作,并提供了具体的代码示例。以下是相关的知识点: #### 1. JQuery简介 JQuery是一个快速、小巧、功能丰富的JavaScript库。它通过...

    jquery实现简单的全选和反选功能

    首先我们看个简单的实例 &lt;!DOCTYPE ...&lt;... &lt;head runat=server&gt;...jQuery实现CheckBox全选、全不选&lt;/title&gt; &lt;script src=http://code.jquery.com/jquery-1.4.4.min.js type

    Js实现复选框的全选、全不选反选功能代码实例

    在上述代码实例中,`obt1`、`obt2`、`obt3`分别代表全选、全不选、反选的按钮,`ocity`是包含所有复选框的容器,`oinput`是获取到的所有复选框元素。当用户点击按钮时,对应的事件监听器会被触发,执行相应的操作。 ...

    jQuery简单实例.zip

    这个"jQuery简单实例.zip"压缩包显然包含了几个使用jQuery实现的基本功能示例,这些功能对于网页交互性提升有着重要作用。下面将详细解释每个功能的实现原理和应用场景。 1. **表格奇偶行变色**: 表格是网页中...

Global site tag (gtag.js) - Google Analytics