Multiple Radio Button checked, unchecks Radio Button group

Question

I would like to know when radio button is checked , it unchecks other object radio button. I have a object and for each object options, radio button is created.

For example, for id=SG two radio buttons are created, if no checked, set bank as default checked else set corresponding selected radio value as checked.

I got stuck in litelement.

for each obj radio options are generated, by default 1st option is checked, but if I check credit option for obj SG, it uncheck default option in 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>
   })`;

}

For each obj, default radio option should be checked if particular radio is checked for a obj

Possible duplicate of [How to set checked attribute to radio in litelement](https://stackoverflow.com/questions/55859715/how-to-set-checked-attribute-to-radio-in-litelement) — dork, May 23 '19 at 09:15

score 0 · Answer 1 · answered May 17 '19 at 01:36

0

You need to use a different name for each radio button group. You're using the same name="sending-${country.id}" for all the buttons.

Try using name="sending-${e.id}" instead. Then it will be sending-SG for id: "SG" and sending-TH for id: "TH".

answered May 17 '19 at 01:36

Barmar

741,623
53
500
612

thanks for reply, am using different name only as you mentioned `name="sending-${country.id}` will have `name="sending-SG` for SG and `name="sending-TH` for TH since i have used map in code – mia May 17 '19 at 01:42

score 0 · Answer 2 · answered May 17 '19 at 02:19

Try to change the name of the checkbox group to be something like 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>

score 0 · Answer 3 · edited Feb 18 '23 at 02:39

Below example may help you:

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 />
      </form>`
  )}`;

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

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

Multiple Radio Button checked, unchecks Radio Button group

3 Answers3