Question

我想知道何时选中单选按钮，它会取消选中其他对象的单选按钮。我有一个对象，并为每个对象选项创建了单选按钮。

例如，对于id = SG，将创建两个单选按钮，如果未选中，则将bank设置为默认选中，否则将相应的选定单选值设置为选中。

我陷入了文盲。

为每个obj单选选项生成，默认情况下选中第一个选项，但是如果我为obj credit选中SG选项，则取消选中TH中的默认选项

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

}

对于每个obj，如果为obj检查了特定的单选，则应检查默认单选选项

Answer 1

您需要为每个单选按钮组使用不同的name。您为所有按钮使用相同的name="sending-${country.id}"。

尝试改用name="sending-${e.id}"。然后，sending-SG将是id: "SG"，sending-TH将是id: "TH"。

Answer 2

尝试将复选框组的名称更改为sendingCountries[]

<label><input type="checkbox" name="sendingCountries[]" value="Malaysia" /> Malaysia</label>
<label><input type="checkbox" name="sendingCountries[]" value="Thailand" /> Thailand</label>
<label><input type="checkbox" name="sendingCountries[]" value="Singapore" /> Singapore</label>
<label><input type="checkbox" name="sendingCountries[]" value="USA" /> USA</label>
<label><input type="checkbox" name="sendingCountries[]" value="Ireland" /> Ireland</label>

Answer 3

下面的示例可能会帮助您：

Demo

const obj = [{id: "SG", options: ["bank", "credit"]},{ id: "TH", options:["bank","debit"]}];
const checkedOp = 'bank';

const myTemp = (el)=>  html`${obj.map(e=> html`<form>${e.options.map(f=> html`<input type="radio" @change=${_onChange} name="sending-${e.id}" value=${f} .checked=${f===el}></input> <label class="form-check-label">${f}, ${e.id }</label></form><br> `)}<hr>`)}`;



render(myTemp(checkedOp), document.body);

function _onChange(u){
    console.log(u.target.value);
    checkedOp = u.target.value;
    render(myTemp(checkedOp), document.body);
  }

选中多个单选按钮，取消选中单选按钮组

3 个答案: