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

Question

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

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

我被困在了litelement中。

对于生成的每个obj单选选项，默认情况下会选中第一个选项，但如果我检查creditobj 的选项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

下面的例子可以帮助你：

演示

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);
  }

Answer 2

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

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

Answer 3

尝试将复选框组的名称更改为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>