jQuery实现checkbox方法

本文主要介绍了jquery实现checkbox的简单操作,对复选框组的全选、全不选、不全选,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

对复选框组的全选、全不选、不全选,获取选中的复选框的值的操作

1.点击全选按钮,复选框组全部选中或者全部取消。
2.实现全选按钮和复选框组的联动,当复选框组中有一个没有被选中后,那么id=‘checkedAll’的全选按钮应该要取消选中;当复选框组全部选中后,全选按钮也应该被选中。
3.获取已选中的复选框的值。

代码:

nbsp;html>    对复选框组的全选操作        $(function(){      /*全选      全选cheched和下方的checkbox按钮的checked是一致的,      故可用this.checked。      注意:$(this).checked是错的      */      $('#checkedAll').click(function() {        $('[name=item]:checkbox').prop('checked', this.checked);      });      /*判断复选框的总数,是否和选中的复选框的数量相等      相等:全选了      不相等:没有全选      */      $('[name=item]:checkbox').click(function() {        /*得到的是ul下 name=item 的复选框数组*/        var $checkedArray = $('[name=item]:checkbox');        /*$checkedArray.filter(':checked') -----> 已经选择的复选框 */        $('#checkedAll').prop('checked',$checkedArray.length==$checkedArray.filter(':checked').length);                  });    });        $(function () {      //获取已选的复选框的值      var checkedArray = new Array();//放已经选择的checkbox的value      var count;//已经选择的个数      $('#btn_submit').click(function() {        checkedArray.length=0;        count=0;        $('[name=item]:checkbox:checked').each(function() {          checkedArray.push($(this).val());          count++;        });        if (checkedArray.length==0) {          alert("Please check one at least.");          return;        }        confirm("已选复选框的值:"+checkedArray+""+"选中的复选框个数:"+count);      });    })    

登录后复制

对于代码中的不足,不够简洁的还可以再优化的地方,如果有什么更好的想法和实现方法,欢迎一起交流学习。

相关推荐:

jquery一键控制checkbox全选、反选或不选

如何判断CheckBox选中是否为空

jQuery如何实现table中两列CheckBox只能选中一个方法

以上就是jQuery实现checkbox方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2790845.html

(0)
上一篇 2025年3月8日 19:02:25
下一篇 2025年3月8日 19:02:34

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • NodeJS视频转码实现方法

    本文主要介绍了nodejs实现视频转码的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 视频转码就是一个先解码,再编码的过程,从而将原来的视频转换成我们需要的视频。这种转换可能包括各…

    编程技术 2025年3月8日
    000
  • jQuery滚动效果的实现方法

    本文主要为大家详细介绍了jquery实现滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 1. 图片轮播: 原理如下: 假设有三张图片,三张图片实际上都是存在于页面上的,但是由于设置的可视部分的大小(这里主要考…

    2025年3月8日
    200
  • jQuery实现定位导航位置详解

    本文主要为大家详细介绍了基于jquery实现定位导航位置效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 当滚动条滚动到内容区域的时候,侧边导航条定位到屏幕,不再动,并且点击导航条跳转到内容所在的位置; nbsp;…

    编程技术 2025年3月8日
    200
  • PHP获取链表中倒数第K个节点的方法实例分享

    本文主要和大家介绍php获取链表中倒数第k个节点的方法,涉及php针对链表的遍历、判断等相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。 问题 输入一个链表,输出该链表中倒数第k个结点。 解决思路 注意这个题目是返回节点,而不是返回值…

    编程技术 2025年3月8日
    200
  • JS中图片压缩实现方法

    本文主要介绍了js中图片压缩的方法,包括等比压缩图片的方法,需要的朋友可以参考下,希望能帮助到大家。 首先想一想我们有哪些需求?大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器;有时候我们也需要将一个base…

    2025年3月8日
    200
  • html中jQuery实现对文本的搜索功能

    本文主要介绍了前端html中jquery实现对文本的搜索功能并把搜索相关内容显示出来,在项目中经常会遇到,今天小编把实例代码分享给大家,需要的朋友可以参考下,希望能帮助到大家。 做项目的时候有这么一个需求,客户信息显示出来后我要搜索查找相关…

    2025年3月8日
    200
  • vue router使用jquery和params传参详解

    本文主要介绍了vue router使用query和params传参的使用和区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到…

    2025年3月8日 编程技术
    200
  • jQuery点击任何地方隐藏DIV功能

    本文主要介绍了jquery除指定区域外点击任何地方隐藏p的相关资料,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家。 具体代码如下所示: $(‘body’).click(function(e) {  var…

    编程技术 2025年3月8日
    200
  • angular中不同组件间传值与通信方法分享

    本文主要介绍了angular中不同的组件间传值与通信的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output):…

    编程技术 2025年3月8日
    200
  • jQuery实现同时切换图标功能详解

    本文主要介绍了jquery实现切换隐藏与显示同时切换图标功能,需要的朋友可以参考下,希望能帮助到大家。 HTML代码: nbsp;html>  jq隐藏显示图标切换 这里是要显示或隐藏的内容        登录后复制  JS代码: $…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论