Javascript 选中Aurelia上的所有选项，这可以改进吗

现在我们有下面的代码，它填充了一些“脏的” 借助aurelia绑定的强大功能：

HTML

<input class="order-input-root" type="checkbox" click.delegate="checkAll()" />

---

是否有任何方法可以改进这一点，aurelia上是否有任何内置功能？我担心的是，如果我想在一个页面上有不同的列表，那么这段代码将是一团混乱

假设所有复选框都已正确绑定，您可以通过使用

更改

事件轻松实现这一点

JS:

export class Welcome {
  constructor() {
    this.isAllChecked = false;
    this.items = [
      { display: 'test 1', checked: false },
      { display: 'test 2', checked: false },
      { display: 'test 3', checked: false },
      { display: 'test 4', checked: false },
    ];
  }

  checkAll() {
    this.items.forEach(i => i.checked = this.isAllChecked);
  }
}

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="isAllChecked" change.delegate="checkAll()" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

import {BindingEngine} from 'aurelia-binding'; //or aurelia-framework
import {inject} from 'aurelia-dependency-injection'; //or aurelia-framework

@inject(BindingEngine)
export class Welcome {
  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
    this.checkAll = false;
    this.items = [
      { display: 'test 1', checked: false },
      { display: 'test 2', checked: false },
      { display: 'test 3', checked: false },
      { display: 'test 4', checked: false },
    ];
    this.checkAllSubscriber = this.bindingEngine.propertyObserver(this, 'checkAll')
      .subscribe((newValue, oldValue) => {
        this.items.forEach(i => i.checked = newValue);
      });
  }

  detached() {
    this.checkAllSubscriber.dispose();
  }
}

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="checkAll" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

HTML:

export class Welcome {
  constructor() {
    this.isAllChecked = false;
    this.items = [
      { display: 'test 1', checked: false },
      { display: 'test 2', checked: false },
      { display: 'test 3', checked: false },
      { display: 'test 4', checked: false },
    ];
  }

  checkAll() {
    this.items.forEach(i => i.checked = this.isAllChecked);
  }
}

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="isAllChecked" change.delegate="checkAll()" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

import {BindingEngine} from 'aurelia-binding'; //or aurelia-framework
import {inject} from 'aurelia-dependency-injection'; //or aurelia-framework

@inject(BindingEngine)
export class Welcome {
  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
    this.checkAll = false;
    this.items = [
      { display: 'test 1', checked: false },
      { display: 'test 2', checked: false },
      { display: 'test 3', checked: false },
      { display: 'test 4', checked: false },
    ];
    this.checkAllSubscriber = this.bindingEngine.propertyObserver(this, 'checkAll')
      .subscribe((newValue, oldValue) => {
        this.items.forEach(i => i.checked = newValue);
      });
  }

  detached() {
    this.checkAllSubscriber.dispose();
  }
}

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="checkAll" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

HTML:

export class Welcome {
  constructor() {
    this.isAllChecked = false;
    this.items = [
      { display: 'test 1', checked: false },
      { display: 'test 2', checked: false },
      { display: 'test 3', checked: false },
      { display: 'test 4', checked: false },
    ];
  }

  checkAll() {
    this.items.forEach(i => i.checked = this.isAllChecked);
  }
}

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="isAllChecked" change.delegate="checkAll()" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

import {BindingEngine} from 'aurelia-binding'; //or aurelia-framework
import {inject} from 'aurelia-dependency-injection'; //or aurelia-framework

@inject(BindingEngine)
export class Welcome {
  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
    this.checkAll = false;
    this.items = [
      { display: 'test 1', checked: false },
      { display: 'test 2', checked: false },
      { display: 'test 3', checked: false },
      { display: 'test 4', checked: false },
    ];
    this.checkAllSubscriber = this.bindingEngine.propertyObserver(this, 'checkAll')
      .subscribe((newValue, oldValue) => {
        this.items.forEach(i => i.checked = newValue);
      });
  }

  detached() {
    this.checkAllSubscriber.dispose();
  }
}

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="checkAll" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

全部检查
${item.display}

记住在不再需要时调用

dispose（）

。

下面是一个工作示例

这些就是我找到的解决办法。如果我找到其他方法，我将更新此答案

---

希望这有帮助

假设所有复选框都已正确绑定，您可以通过使用

change

事件轻松实现这一点

JS:

export class Welcome {
  constructor() {
    this.isAllChecked = false;
    this.items = [
      { display: 'test 1', checked: false },
      { display: 'test 2', checked: false },
      { display: 'test 3', checked: false },
      { display: 'test 4', checked: false },
    ];
  }

  checkAll() {
    this.items.forEach(i => i.checked = this.isAllChecked);
  }
}

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="isAllChecked" change.delegate="checkAll()" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

import {BindingEngine} from 'aurelia-binding'; //or aurelia-framework
import {inject} from 'aurelia-dependency-injection'; //or aurelia-framework

@inject(BindingEngine)
export class Welcome {
  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
    this.checkAll = false;
    this.items = [
      { display: 'test 1', checked: false },
      { display: 'test 2', checked: false },
      { display: 'test 3', checked: false },
      { display: 'test 4', checked: false },
    ];
    this.checkAllSubscriber = this.bindingEngine.propertyObserver(this, 'checkAll')
      .subscribe((newValue, oldValue) => {
        this.items.forEach(i => i.checked = newValue);
      });
  }

  detached() {
    this.checkAllSubscriber.dispose();
  }
}

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="checkAll" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

HTML:

export class Welcome {
  constructor() {
    this.isAllChecked = false;
    this.items = [
      { display: 'test 1', checked: false },
      { display: 'test 2', checked: false },
      { display: 'test 3', checked: false },
      { display: 'test 4', checked: false },
    ];
  }

  checkAll() {
    this.items.forEach(i => i.checked = this.isAllChecked);
  }
}

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="isAllChecked" change.delegate="checkAll()" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

import {BindingEngine} from 'aurelia-binding'; //or aurelia-framework
import {inject} from 'aurelia-dependency-injection'; //or aurelia-framework

@inject(BindingEngine)
export class Welcome {
  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
    this.checkAll = false;
    this.items = [
      { display: 'test 1', checked: false },
      { display: 'test 2', checked: false },
      { display: 'test 3', checked: false },
      { display: 'test 4', checked: false },
    ];
    this.checkAllSubscriber = this.bindingEngine.propertyObserver(this, 'checkAll')
      .subscribe((newValue, oldValue) => {
        this.items.forEach(i => i.checked = newValue);
      });
  }

  detached() {
    this.checkAllSubscriber.dispose();
  }
}

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="checkAll" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

HTML:

export class Welcome {
  constructor() {
    this.isAllChecked = false;
    this.items = [
      { display: 'test 1', checked: false },
      { display: 'test 2', checked: false },
      { display: 'test 3', checked: false },
      { display: 'test 4', checked: false },
    ];
  }

  checkAll() {
    this.items.forEach(i => i.checked = this.isAllChecked);
  }
}

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="isAllChecked" change.delegate="checkAll()" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

import {BindingEngine} from 'aurelia-binding'; //or aurelia-framework
import {inject} from 'aurelia-dependency-injection'; //or aurelia-framework

@inject(BindingEngine)
export class Welcome {
  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
    this.checkAll = false;
    this.items = [
      { display: 'test 1', checked: false },
      { display: 'test 2', checked: false },
      { display: 'test 3', checked: false },
      { display: 'test 4', checked: false },
    ];
    this.checkAllSubscriber = this.bindingEngine.propertyObserver(this, 'checkAll')
      .subscribe((newValue, oldValue) => {
        this.items.forEach(i => i.checked = newValue);
      });
  }

  detached() {
    this.checkAllSubscriber.dispose();
  }
}

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="checkAll" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

全部检查
${item.display}

记住在不再需要时调用

dispose（）

。

下面是一个工作示例

这些就是我找到的解决办法。如果我找到其他方法，我将更新此答案

---

希望这有帮助

Fabio我选择了这个解决方案，但也尝试了您的解决方案，您认为：$（“输入：checkbox.order输入”）.prop（'checked'，$（“输入：checkbox.order输入根”）.prop（'checked'）；这似乎是一个很好的解决方案，但与Aurelia绑定无关。它与jQuery相关。无论如何，选择一个让你感觉更舒服的：）我肯定会把它改成aurelia，但我需要和其他到处使用jquery的程序员谈谈：D这就是为什么我标记了你的答案Fabio我选择了这个解决方案，但也尝试了你的，你觉得怎么样：$（“输入：checkbox.order输入”）.prop（'checked'$(“输入：复选框。订单输入根”）.prop（'checked'））；这似乎是一个很好的解决方案，但与Aurelia绑定无关。它与jQuery相关。无论如何，选择一个让您感觉更舒服的解决方案：）我肯定会将其更改为Aurelia，但我需要与其他在任何地方使用jQuery的程序员交谈：D这就是我标记您答案的原因