SF Lightning Web Components->如何将值传递给

Question

有谁知道如何将选中的值传递给Lightning Web Component中的复选框？我的代码如下：

import { LightningElement, track } from 'lwc';
export default class MyComponent extends LightningElement {
    @track isChecked;

    constructor() {
        super();
        isChecked = false;
    }   

}

<template>
    <lightning-card title="My Card" icon-name="custom:custom9">
        <div class="slds-m-around_medium">
                <lightning-input type="checkbox" label="my checkbox" name="input1" checked="{isChecked}"></lightning-input>
        </div>
    </lightning-card>    
</template>

它不起作用。

Answer 1

请参考我为您编写的代码，如果不问我，它应该是有意义的。

您的html一个或多个复选框

<template>
    For multiple Checkbox use Checkbox Group
    <lightning-checkbox-group name="Checkbox Group"
                              label="Checkbox Group"
                              options={options}
                              value={value}
                              onchange={handleChange}></lightning-checkbox-group>
    <p>Selected Values are: {selectedValues}</p>

      for just single Checkbox
    <input type="checkbox" name="vehicle1" value="Bike" id="mycheck" onclick={myFunction}> I have a bike<br>

    <p>Selected:</p> {checkvalue} 
</template>

你的js处理它，对于单个复选框，它现在指定值（你实际要求）复选框以保持简单你可以修改它根据最后一个值指定真假。

import { LightningElement, track } from 'lwc';

export default class CheckboxGroupBasic extends LightningElement {
    @track value = ['option1'];
    @track checkvalue ;

    get options() {
        return [
            { label: 'Ross', value: 'option1' },
            { label: 'Rachel', value: 'option2' },
        ];
    }

    get selectedValues() {
        return this.value.join(',');
    }

    handleChange(e) {
        this.value = e.detail.value;
    }

    myFunction(e){  // it is simple assigning value. here you can toggle value
         this.checkvalue = e.target.value;
    }
}

我们有LWC Playground链接，你想看到它的工作。 https://developer.salesforce.com/docs/component-library/tools/playground/1_UbRgnJ9/9/edit

如果根据您的需要更正，请不要忘记upvote并选择最佳答案。