jquery 复选框最多选择3个，已选的可以取消（选框样式）

原创于 2019-02-20 13:32:08 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox #点击效果 #最多三个

html 同时被 2 个专栏收录

22 篇文章

订阅专栏

JavaScript

19 篇文章

订阅专栏

本文介绍了一段使用jQuery实现的代码，该代码用于限制页面上带有特定名称属性的复选框最多只能同时选中三个。当尝试选中超过三个复选框时，额外的选择将被阻止。

$(function(){ 
  var cb1 = $('[name="scxm-checkbox"]'); 
  cb1.change(function () {    
    if (this.checked && cb1.filter(':checked').length > 3) {
      this.checked = false;
      this.setAttribute('checked','');
    }else if(this.checked && cb1.filter(':checked').length < 4){
      this.checked = true;
      this.setAttribute('checked','checked');
    }else{
      this.checked = false;
      this.setAttribute('checked','');
    }
  })
})

主要代码：

var cb1 = $('[name="cb1"]');
cb1.change(function () {
   if (this.checked && cb1.filter(':checked').length > 3) this.checked = false;
 })