如何实现jQuery多选框功能

这篇文章主要介绍如何实现jQuery多选框功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联公司主要从事网页设计、PC网站建设（电脑版网站建设）、wap网站建设（手机版网站建设）、成都响应式网站建设、程序开发、网站优化、微网站、微信平台小程序开发等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了丰富的成都做网站、成都网站制作、网站设计、网络营销经验，集策划、开发、设计、营销、管理等多方位专业化运作于一体。

Jquery多选框的基本操作：支持全选、反选、取消全选的功能

HTML正文：

全选/全不选

兴趣爱好：

篮球
足球
羽毛球

Javascript操作代码：

$("#c1").click(function(){
if(this.checked){
  $("input[name='interst']").attr("checked","checked");
}else{
  //$("input[name='interst']").attr("checked",""); //等价于
  $("input[name='interst']").removeAttr("checked");
}
});

$("#b1").click(function(){
  $("input[name='interst']").attr("checked","checked");
});

$("#b2").click(function(){
  $("input[name='interst']").attr("checked","");
});

$("#b3").click(function(){
  $("input[name='interst']").each(function(){
  if(this.checked){
    this.checked="";
  }else{
    this.checked="checked";
  }
  });
});

$("#b4").click(function(){
$("input[name='interst']:checked").each(function(){
  alert(this.value);
});
});

效果：

以上是“如何实现jQuery多选框功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

本文标题：如何实现jQuery多选框功能
路径分享：http://bzwzjz.com/article/pdgdis.html