Question

是否有直接的方法来创建一个ons-switch按钮组，以便在给定时间只能切换/检查一个开关？类似于单选按钮组。例如

之类的东西

<ons-switch name="my_group_name"></ons-switch>

Answer 1

实际上，因为<ons-switch>元素的内部输入元素是一个复选框，所以你必须编写一些JavaScript来使它们像单选按钮一样。

你可以这样做：

var setAll = function(elements, value) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].checked = value;
  }
}

var checkboxes = document.querySelectorAll('.switch-group > ons-switch > label > input');

for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', function() {
    setAll(checkboxes, false);
    this.checked = true;
  });
}

它只会监听change个事件，并会将所有切换设置为false，但点击的除外。

这是它的一个实例：

http://codepen.io/argelius/pen/ByyxwX

如何创建ons-switch组？

1 个答案: