javascript - 如何在 Knockout 中的选择选项中使用复选框

Question

您好，我想为下拉列表中的所有选项添加复选框。

我的 HTML 是这样的 -

<div class="multi-select-dd-list"> 
    <div id="checkboxes" class="patient-list-selection">                
      <select class="patient-list-select specialty-list-left" data-bind="options : specialtiesList, optionsText : 'name'">
      </select>
    </div> 
</div>

所以我在这里绑定(bind)specialtiesList。

我想要的是一种在下拉列表的每个选项之前使用复选框的方法。 有什么建议吗？

Answer 1

这是实现相同功能的代码。我认为你看起来像这样。

.js、.css 和 .html 文件

function CheckableBox(label, isChecked) {
  this.label = label;
  this.isChecked = ko.observable(isChecked || false);
}

function ViewModel() {
  this.items = [
    new CheckableBox("First", true),
    new CheckableBox("Second", true),
    new CheckableBox("Third")
  ];
  
  this.selectedItems = ko.observableArray();

	/* Includes only the checked items */
  this.tempSelection = ko.pureComputed(function() {
    return this.items.filter(function(item) {
      return item.isChecked();
    });
  }, this);
  
  /* Builds a comma separated string of selected items */
  this.selectedItemsStr = ko.pureComputed(function() {
  	var str = this.selectedItems()
    	.map(function(item) {
      	return item.label;
      })
      .join(", ")
      
      return str || "-- No options selected --";
  }, this);
  
  /* Determines whether the selectable options are displayed. */
  this.optionsShown = ko.observable(false);
  
  this.optionsShown.subscribe(function() {
  	this.updateSelections();
  }, this);
  
  this.confirmSelection();
};

ViewModel.prototype.toggleOptions = function() {
	this.optionsShown(!this.optionsShown());
};

ViewModel.prototype.confirmSelection = function() {
	this.selectedItems(this.tempSelection());
  this.closeOptions();
};

ViewModel.prototype.closeOptions = function() {
  this.optionsShown(false);
}

ViewModel.prototype.updateSelections = function() {
	var selection = this.selectedItems();
  this.items.forEach(function(item) {
    item.isChecked(~selection.indexOf(item));
  });
}

ko.applyBindings(new ViewModel());

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

.main-container {
  width: 400px;
}

.main-container,
.select-container {
  position: relative;
}

.select-container {
  height: 2em;
}

select,
.select-container::after {
  width: 100%;
  height: 100%;
}

.select-container::after {
  content: "";
  position: absolute;
  top: 0;
  background: rgba(0,0,0,0);
  display: block;
}

.options-container {
  position: absolute;
  top: 2em;
  width: 100%;
  border: 1px solid #A9A9A9;
  background: #FFFFFF;
  display: none;
}

.options-container.shown {
  display: block;
}

label {
  display: block;
  padding: .2em;
}

label:not(:last-child) {
  border-bottom: 1px solid #FFFFFF;
}

.checked {
  background: #568ECB;
  color: white;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #A9A9A9;
  background: #F6F6F6;
}

.button-container button {
  margin: .4em;
  margin-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="main-container">
  <div class="select-container" data-bind="click: toggleOptions">
    <select data-bind="options: [selectedItemsStr]"></select>
  </div>
  <div class="options-container" data-bind="css: { 'shown': optionsShown }">
    <div class="options" data-bind="foreach: items">
      <label data-bind="css: { 'checked': isChecked }">
        <input type="checkbox" data-bind="checked: isChecked">
        <span data-bind="text: label"></span>
      </label>
    </div>
    <div class="button-container">
      <button type="button" data-bind="click: confirmSelection">OK</button>
      <button type="button" data-bind="click: closeOptions">Cancel</button>
    </div>
  </div>
</div>