如何在 litelement 中将 checked 属性设置为 radio

Question

我想知道如何使用 litelement 将选中的设置为单选按钮。我有一个对象，并且为每个对象选项创建了单选按钮。

例如，为 id=SG 创建了两个单选按钮，如果没有勾选，设置银行为默认勾选否则将相应的选定单选值设置为已选中。

我卡在了 litelement 中。

const obj= [{
    id: "SG",
    options: ["bank", "credit"]
  },
  {
    id: "TH",
    options: ["bank"]
  }
];
render(){
  ${obj.map((e)=>{
return html`
         <form>
            ${obj.options.map((option_value)=>{
                   return html`
                       <input class="form-check-input"  name="sending-${option_value}" type="radio" id="provider-send-${option_value}" value=${option_value} ?checked=${option_value=="bank"} > // not working
                         <label class="form-check-label">
                                ${option_value}
                         </label><br>
             `})}
          </form>
   })`;

}

Expected Output:
Set checked to corresponding radio selected
If no checked, set bank as default checked

Answer 1

如果选项是 bank:

，这会将选中的属性设置为 true

import { LitElement, html } from 'lit-element';

class TestElement extends LitElement {
  static get properties() {
    return {
      countries: {
        type: Array,
      },
    };
  }

  constructor() {
    super();
    this.countries = [
      {
        id: 'SG',
        options: ['bank', 'credit'],
      },
      {
        id: 'TH',
        options: ['bank'],
      },
      {
        id: 'MY',
        options: ['credit'],
      }
    ];
  }

  render() {
    return html`
      ${this.countries.map(country => html`
        <fieldset>
          <legend>${country.id}</legend>
          <form>
            ${country.options.map(option => html`
              <input
                id="provider-send-${option}"
                name="sending-${country.id}"
                type="radio"
                class="form-check-input"
                value="${option}"
                ?checked=${option === 'bank'}
              >
              <label class="form-check-label">${option}</label>
              <br>
            `)}
          </form>
        </fieldset>
      `)}
    `;
  }
}

customElements.define('test-element', TestElement);

看起来您只是错过了映射实际 obj（我的代码段中的 country）。

此外，为了更改所选无线电，name 组中所有无线电的 name 应该相同。您的代码正在为每个收音机设置不同的名称。

如何在 litelement 中将 checked 属性设置为 radio

How to set checked attribute to radio in litelement

javascript

jquery

polymer

lit-element

lit-html