var CheckBox = {
  newCheckBox: function(elementId, list, defaultChecked, callback, that) {
    var check = $('#' + elementId)
    check.empty()
    var onclickListener = function () {
      var checkbox = this
      callback(checkbox, that)
    }
    for (let i = 0; i < list.length; i++) {
      const e = list[i];

      var checked = defaultChecked.indexOf(e.value) != -1
      var checkbox = $("<input type='checkbox' id='" + elementId + i + "' value='" + e.value + "' />")
      var label = $("<label for='" + elementId + i + "'>" + e.label + "</label>")
      label.css('margin', '0')
      label.css('margin-left', '4px')
      // label.css('background-color', 'black')
      // checkbox.css('background-color', 'white')
      checkbox.attr('checked', checked)
      checkbox.on('click', onclickListener)

      var item = $('<div></div>')
      item.css('padding-right', '0.5rem')
      item.css('display', 'flex')
      item.css('align-items', 'center')
      item.append(checkbox)
      item.append(label)

      check.append(item)
    }
  },

  newRadioBox: function(elementId, name, list, defaultChecked, callback, that) {
    var radioboxlist = []
    var radio = $('#' + elementId)
    radio.empty()
    var onclickListener = function () {
      var radiobox = this
      callback(radiobox, that)
    }
    for (let i = 0; i < list.length; i++) {
      const e = list[i];
      var checked = defaultChecked.indexOf(e.value) != -1
      var radiobox = $("<input type='radio' name='" + name + "' id='" + "r-" + elementId + "_" + i + "' value='" + e.value + "," + e.name + "'/>")
      var label = $("<label for='" + "r-" + elementId + "_" + i + "'>" + e.label + "</label>")
      label.css('margin', '0')
      label.css('margin-left', '4px')
      // label.css('background-color', 'black')
      // radiobox.css('background-color', 'white')
      radiobox.attr('checked', checked)
      radiobox.on('click', onclickListener)
      radioboxlist.push(radiobox)

      var item = $('<div></div>')
      item.css('padding-right', '0.5rem')
      item.css('display', 'flex')
      item.css('align-items', 'center')
      item.append(radiobox)
      item.append(label)

      radio.append(item)
    }
  }
}