Question

我有四个复选框，如果选中了ID = 4的复选框，我想自动选中ID = 2的复选框。

我做了以下事情，但没有得到输出。有人可以帮我吗？

{#each category in checkboxList}}
            {{input id = category.CHECKBOX_ID type="checkbox" checked=category.IS_CHECKED}}
            {{#if category.CHECKBOX_ID == 4 && category.IS_CHECKED == true}}
                {{action 'CheckSize'}}
            {{/if}}

checkboxList是

[
   {"IS_CHECKED":false,"CHECKBOX_ID":1}, 
   {"IS_CHECKED":false,"CHECKBOX_ID":2},
   {"IS_CHECKED":true,"CHECKBOX_ID":3},
   {"IS_CHECKED":false,"CHECKBOX_ID":4}
]

Answer 1

您将要单独管理复选框的状态。

这是我为另一个有类似问题要解决的SO问题所做的示例：

https://ember-twiddle.com/468a737efbbf447966dd83ac734f62ad

要点是我们使用单个操作来响应对任何复选框的点击：

  @action
  toggleChecked(id) {
    const newTree = check(this.options, id);

    this.set('options', newTree);
  }

在此示例中（来自ember-twiddle），所有逻辑都提取到名为check的纯函数中。

检查本身涉及很多，但是由于该示例与您遇到的问题之间的应用程序逻辑不同，因此我仅显示入口点函数：

export function check(tree, id, transform = toggle) {
  if (tree === undefined) return undefined;

  if (Array.isArray(tree)) {
    return tree.map(t => check(t, id, transform));
  } 

  if (tree.id === id || id === 'all') {
    return checkNode(tree, id, transform);
  }

  if (tree.children) {
    return checkChildren(tree, id, transform);
  }

  return tree;
}

这只是一个示例，说明如何使用纯函数不变地修改所有复选框的表示形式。您的逻辑可能会有所不同。

希望这会有所帮助：）

在余烬中，如何基于另一个更改复选框的值

1 个答案: