Javascript jquery switchery需要限制所选交换机的数量

我有一个带有多个复选框的页面，用于选择各种选项，用户最多只能选择6个选项

我完全可以使用标准html复选框，使用以下代码：

$('.ios-switch').on('click', function(e) {
var num_checked = 0;
$('.ios-switch').each(function() { if ($(this).prop('checked')) { num_checked++; } });
if (num_checked > 6) { $(this).prop('checked', false); }
});

此后，我添加了jquery switchery库，将复选框转换为iOS风格的开关

我使用以下代码进行设置：

var elems = Array.prototype.slice.call(document.querySelectorAll('.ios-switch'));
elems.forEach(function(html) {
var switchery = new Switchery(html, { size: 'small' });
});

这对于设置页面上所有复选框的样式很好，但现在限制选择数量的第一位代码不再起作用

---

我尝试过switchery站点上的各种代码片段和方法，但我无法恢复一开始的功能，用户最多只能选择6个选项。

似乎需要使用一个简单的

更改

事件处理程序：

function limitChecksTo(n) {

  // ensures the passed-in number is a Number,
  // even if entered as a String (eg: '6');
  n = parseInt(n, 10);

  // converting the NodeList from document.querySelectorAll()
  // into an Array (ECMAScript 6):
  var checkboxes = Array.from(

      // finding all the <input> elements whose type is 'checkbox'
      // and have a class-name of 'ios-switch':
      document.querySelectorAll('input[type=checkbox].ios-switch')
      );

  // 'this' is passed in automatically
  // from EventTarget.addEventListener()
  // and is the element that has the
  // event-listener attached:
  this.checked = checkboxes

  // filtering the array of checkboxes to retain
  // only those that are checked (using Arrow functions)
    .filter(checkbox => checkbox.checked)
  // if the length is less than n + 1 we
  // we set the checked state of the element firing
  // the event to true, otherwise to false:
    .length < n + 1;
}

// iterating over the 'elems' using Array.prototype.forEach():
elems.forEach(function (html) {
  var switchery = new Switchery(html, { size: 'small' });

  // setting the limitChecksTo() function as the
  // event-handler for the 'change' event:
  html.addEventListener('change', limitChecksTo(6));
});

功能限制检查STO（n）{
//确保传入的数字是一个数字，
//即使作为字符串输入（例如：“6”）；
n=parseInt（n，10）；
//从document.querySelectorAll（）转换节点列表
//放入数组（ECMAScript 6）：
var复选框=Array.from(
//查找类型为“checkbox”的所有元素
//并具有“ios开关”的类名：
document.querySelectorAll（'input[type=checkbox].ios开关'）
);
//“this”是自动传入的
//从EventTarget.addEventListener（）开始
//并且是具有
//已附加事件侦听器：
this.checked=复选框
//筛选复选框数组以保留
//仅限选中的（使用箭头函数）
.filter（checkbox=>checkbox.checked）
//如果长度小于n+1，我们
//我们设置元素的已检查状态
//将事件设置为true，否则设置为false：
.长度

参考资料：

---

无法使用switchery实现这一点，看起来任何解决方案都将非常复杂
最后，我找到了另一个jquery库iosCheckbox，它的使用和控制要简单得多

---

我能够设计CSS，使iosCheckbox看起来与switchery一模一样，因此没有明显的前端差异，但后端代码要小得多，我的解决方案运行得更快
当您开始使用switchery时，是否更改了元素的类？换句话说，你的js还有“.checkbox”元素需要限制吗？这是我原来的帖子中的一个错误，现在已经更正了。所有复选框都有一个“.ios switch”类，并且两组代码都设置为引用该类。这一行中似乎存在sytax错误：。筛选器（复选框=>checkbox.checked）我尚未测试，但它看起来正确；我可以问一下您使用的是哪种浏览器吗？他们是否报告使用类似箭头功能的JS Fiddle有任何错误：