Checkbox

<Checkbox bind:checked on:change="{onChange}">Checkbox</Checkbox>

<script>
  import { Checkbox } from "svant";

  let checked = false;

  function onChange() {
    console.log(`checked = ${checked}`);
  }
</script>

<div>
  <Checkbox disabled />
  <br />
  <Checkbox bind:checked disabled />
</div>

<script>
  import { Checkbox } from "svant";

  let checked = true;
</script>

<div>
  <p style="{{ marginBottom: '20px' }}">
    <Checkbox bind:checked {disabled} on:change="{onChange}">{label}</Checkbox>
  </p>
  <p>
    <Button type="primary" size="small" on:click="{toggleChecked}">
      {!checked ? 'Check' : 'Uncheck'}
    </Button>
    <Button
      style="{{ margin: '0 10px' }}"
      type="primary"
      size="small"
      on:click="{toggleDisable}">
      {!disabled ? 'Disable' : 'Enable'}
    </Button>
  </p>
</div>

<script>
  import { Checkbox } from "svant";
  import { Button } from "svant";
  let checked = true;
  let disabled = false;
  let label;
  $: label = `${checked ? "Checked" : "Unchecked"}-${
    disabled ? "Disabled" : "Enabled"
  }`;
  function toggleChecked() {
    checked = !checked;
  }

  function toggleDisable() {
    disabled = !disabled;
  }

  function onChange() {
    console.log("checked = ", checked);
  }
</script>

<div>
  <CheckboxGroup
    options="{plainOptions}"
    bind:value="{value1}"
    on:change="{onChange}" />
  <br />
  <br />
  <CheckboxGroup {options} bind:value="{value2}" on:change="{onChange}" />
  <br />
  <br />
  <CheckboxGroup
    options="{optionsWithDisabled}"
    disabled
    bind:value="{value3}"
    on:change="{onChange}" />
</div>

<script>
  import { CheckboxGroup } from "svant";

  let value1 = ["Apple"];
  let value2 = ["Pear"];
  let value3 = ["Apple"];

  const plainOptions = ["Apple", "Pear", "Orange"];
  const options = [
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange", disabled: true }
  ];
  const optionsWithDisabled = [
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange" }
  ];

  function onChange({ detail: checkedValues }) {
    console.log("checked = ", checkedValues);
  }
</script>

<div>
  <div className="site-checkbox-all-wrapper">
    <Checkbox
      {indeterminate}
      on:change="{onCheckAllChange}"
      checked="{checkAll}">
      Check all
    </Checkbox>
  </div>
  <br />
  <CheckboxGroup
    options="{plainOptions}"
    bind:value="{checkedList}"
    on:change="{onChange}" />
</div>

<script>
  import { CheckboxGroup, Checkbox } from "svant";

  const plainOptions = ["Apple", "Pear", "Orange"];
  let checkedList = ["Apple", "Orange"];
  let indeterminate = true;
  let checkAll = false;

  function onChange({ detail }) {
    indeterminate =
      checkedList.length && checkedList.length < plainOptions.length;
    checkAll = checkedList.length === plainOptions.length;
  }

  function onCheckAllChange({ detail }) {
    console.log(detail.target.checked);
    checkedList = detail.target.checked ? plainOptions : [];
    indeterminate = false;
    checkAll = detail.target.checked;
  }
</script>

<CheckboxGroup bind:value style="{{ width: '100%' }}" on:change="{onChange}">
  <Checkbox value="A">A</Checkbox>
  <Checkbox value="B">B</Checkbox>
  <Checkbox value="C">C</Checkbox>
  <Checkbox value="D">D</Checkbox>
  <Checkbox value="E">E</Checkbox>
</CheckboxGroup>

<script>
  import { CheckboxGroup, Checkbox } from "svant";
  let value = [];
  function onChange() {
    console.log("checked = ", value);
  }
</script>