Question

我有这个代码，我使用knockout.js foreach绑定与使用css类中的图像设置样式的复选框。

如何分别为每个复选框动态分配ID，并将标签与该动态复选框ID相关联。

任何人都可以帮我解决这个问题吗？

＆＃13;

input[type=checkbox].css-checkbox1 {
  display: none;
  width: 30px;
  margin: 0;
  padding: 0;
  opacity: 0;
}
input[type=checkbox].css-checkbox1 + label {
  display: inline-block;
  height: 30px;
  width: 30px;
  line-height: 30px;
  cursor: pointer;
  padding-left: 30px;
  background-repeat: no-repeat;
  background: url(../images/img_sprite.png) no-repeat -14px -78px;
}
input[type=checkbox].css-checkbox1:checked + label {
  background: url(../images/img_sprite.png) no-repeat -47px -78px;
}

＆＃13;

<html>

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
</head>

<body>
  <input type="button" value="Activity" data-bind="click: showActivity" />
  <div data-bind="if: showActivityMenu">
    <div data-bind="foreach:activity">
      <input type="checkbox" id="checkbox1" value=" " data-bind="checkedValue: name, checked:$parent.selectedActivity" class="css-checkbox1" />
      <label for="checkbox1" data-bind="text:name"></label>
    </div>
    <div style="float:right;">
      <button data-bind="click:collectActivity">OK</button>
    </div>
  </div>
  <div data-bind="ifnot: showActivityMenu">
    <span class="inner" data-bind="text:selectedActivity"> </span>	
  </div>
</body>

<script>
  function AAsearchViewModel() {
    var self = this;
    self.showActivityMenu = ko.observable(false);
    self.activity = ko.observableArray([{
      name: 'Yoga',
      val: 1
    }, {
      name: 'Pilates',
      val: 2
    }, {
      name: 'Kickboxing',
      val: 3
    }]);
    self.selectedActivity = ko.observableArray(['Pilates']);
    self.showActivity = function() {
      self.showActivityMenu(true);
    };
    self.collectActivity = function() {
      self.showActivityMenu(false);
    };
  };

  ko.applyBindings(new AAsearchViewModel());
</script>

</html>

＆＃13;

Answer 1

您的html变得无效，因为所有复选框都具有相同的ID，并且标签具有相同的for属性，因此当您点击任何标签时，只会检查第一个复选框。

解决方案是生成唯一ID（例如$index()中使用foreach）：

<input type="checkbox" data-bind="attr: { id: 'checkbox' + $index() }, checkedValue: name, checked:$parent.selectedActivity"  class="css-checkbox1"/>
<label data-bind="text:name, attr: { for: 'checkbox' + $index() }"></label>

这是JsFiddle Demo

CSS，knockout.js：如何使用foreach data-bind动态地将id分配给checkbox

1 个答案: