繫結到核取方塊

基本核取方塊

export class MyViewModel {
    favoriteColors = [];
    colors = ['Red', 'Yellow', 'Pink', 'Green', 'Purple', 'Orange', 'Blue'];
}

<template>
  <label repeat.for="color of colors">
    <input type="checkbox" value.bind="color" checked.bind="favoriteColors" />
    ${color}
  </label>
  
  <p>Favourite colors:</p>
  <ul if.bind="favoriteColors">
    <li repeat.for="color of favoriteColors">${color}</li>
  </ul>
</template>

帶有物件陣列的核取方塊

export class MyViewModel {
    people = [];
    selectedPeople = [];
    
    constructor() {
        this.people = [
            {name: 'John Michaels'},
            {name: 'Gary Stevens'},
            {name: 'Carrie Smitch'},
            {name: 'Jesus Wohau'}
        ];
    }
}

<template>
  <label repeat.for="person of people">
    <input type="checkbox" model.bind="person" checked.bind="selectedPeople" />
    ${person.name}
  </label>
  
  <p>Selected people:</p>
  <ul if.bind="selectedPeople">
    <li repeat.for="person of selectedPeople">${person.name}</li>
  </ul>
</template>

帶有布林值的核取方塊

export class MyViewModel {
    agreeToTerms = false;
}

<template>
  <label><input type="radio" name="terms" model.bind="true" checked.bind="agreeToTerms" />Yes</label>
  <label><input type="radio" name="terms" model.bind="false" checked.bind="agreeToTerms" />No</label>
  <br><br>
  <strong>${agreeToTerms ? 'I agree' : 'I disagree'}</strong>
</template>