单复选框 / BoxGroup

优质

小牛编辑

130浏览

2023-12-01

复选框
普通复选框

<div class="content">
  复选框1：<div class="ui-boxgroup" id="checkbox1"></div>
</div>

require(['moye/BoxGroup'], function (BoxGroup) {
  new BoxGroup({
  main: document.getElementById('checkbox1'),
  datasource: [
    {value: 0, name: '不限'},
    {value: 1, name: '中关村-上地'},
    {value: 2, name: '亚运村'},
    {value: 3, name: '北京南站商圈超长'}
  ],
  value: [1, 2]
  }).render();
});

checkbox

require(['moye/BoxGroup'], function (BoxGroup) {
  new BoxGroup({
  main: document.getElementById('checkbox1'),
  datasource: [
    {value: 0, name: '不限'},
    {value: 1, name: '中关村-上地'},
    {value: 2, name: '亚运村'},
    {value: 3, name: '北京南站商圈超长'}
  ],
  value: [1, 2]
  }).render();
});

普通单选框

<div class="content">
  单选框1：<div class="ui-boxgroup" id="radio1"></div>
</div>

require(['moye/BoxGroup'], function (BoxGroup) {
  new BoxGroup({
  main: document.getElementById('radio1'),
  boxType: 'radio',
  datasource: [
    {value: 0, name: '不限'},
    {value: 1, name: '中关村-上地'},
    {value: 2, name: '亚运村'},
    {value: 3, name: '北京南站商圈超长'}
  ],
  value: [1]
  }).render();
});

radio

require(['moye/BoxGroup'], function (BoxGroup) {
new BoxGroup({
  main: document.getElementById('radio1'),
  boxType: 'radio',
  datasource: [
    {value: 0, name: '不限'},
    {value: 1, name: '中关村-上地'},
    {value: 2, name: '亚运村'},
    {value: 3, name: '北京南站商圈超长'}
  ],
  value: [1]
  }).render();
});

木有图标的复选框

可以通过重写 getItemHTML 方法，改变每个选项的 HTML 结构

注意我们约定每一个选项单元最外层的元素必须包含一个统一的 selector ，默认是[data-role=boxgroup-item] ，可以通过修改配置项 itemSelector 来修改。

<div class="content">
  复选框：<div class="ui-boxgroup" id="checkbox2"></div>
  所选的值：<div id="values">1</div>
</div>

require(['jquery','moye/BoxGroup'], function ($, BoxGroup) {
  new BoxGroup({
  main: document.getElementById('checkbox2'),
  icons: false,
  activeClass: 'ui-boxgroup-item-checked',
  datasource: [
    {value: 0, name: '不限'},
    {value: 1, name: '中关村-上地'},
    {value: 2, name: '亚运村'},
    {value: 3, name: '北京南站商圈超长'}
  ],
  value: [1],
  getItemHTML: function (state, item) {

      var classNames = this.helper.getPartClasses('item');
      var index = $.inArray(item, this.datasource);

      if (state) {
        classNames.push(this.activeClass);
      }
    
      if (index === 0) {
        classNames.push('first');
      }
      else if (index === this.datasource.length - 1) {
        classNames.push('last');
      }

      return ''
        + '<label class="' + classNames.join(' ') + '" data-role="boxgroup-item">'
        +   '<input type="' + this.boxType + '" value="' + item.value + '">'
        +   item.name
        + '</label>';

    }
  })
  .render()
  .on('change', function(e) {
    $('#values').html(this.getValue().join('，'));
  });
});

checkbox

require(['jquery','moye/BoxGroup'], function ($, BoxGroup) {
  new BoxGroup({
    main: document.getElementById('checkbox2'),
    icons: false,
    activeClass: 'ui-boxgroup-item-checked',
    datasource: [
      {value: 0, name: '不限'},
      {value: 1, name: '中关村-上地'},
      {value: 2, name: '亚运村'},
      {value: 3, name: '北京南站商圈超长'}
    ],
    value: [1],
    getItemHTML: function (state, item) {

      var classNames = this.helper.getPartClasses('item');
      var index = $.inArray(item, this.datasource);

      if (state) {
        classNames.push(this.activeClass);
      }

      if (index === 0) {
        classNames.push('first');
      }
      else if (index === this.datasource.length - 1) {
        classNames.push('last');
      }

      return ''
        + '<label class="' + classNames.join(' ') + '" data-role="boxgroup-item">'
        +   '<input type="' + this.boxType + '" value="' + item.value + '">'
        +   item.name
        + '</label>';

    }
  })
  .render()
  .on('change', function(e) {
    $('#values').html(this.getValue().join('，'));
  });
});