Многократные переключатели отмечены, снимает флажок группы переключателей - PullRequest
Новая
       13

Многократные переключатели отмечены, снимает флажок группы переключателей

0 голосов
/ 17 мая 2019

Хотелось бы знать, когда установлен переключатель, он отключает переключатель другого объекта. У меня есть объект, и для каждого параметра объекта создается переключатель.

Например, для id = SG создаются две радиокнопки, если флажок не установлен, установите банк как проверенный по умолчанию, иначе установите соответствующее выбранное значение радио как проверенный.

Я застрял в грамоте.

для каждого obj генерируются опции радио, по умолчанию 1-я опция включена, но если я проверяю опцию credit для obj 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>
   })`;

}

Для каждого объекта должна быть включена опция радио по умолчанию, если для радио установлено конкретное радио

Ответы [ 3 ]

0 голосов
/ 17 мая 2019

Попробуйте изменить имя группы флажков на что-то вроде 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>
0 голосов
/ 18 мая 2019

Ниже пример может помочь вам:

Демо 

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);
  }
0 голосов
/ 17 мая 2019

Вам нужно использовать разные name для каждой группы переключателей.Вы используете один и тот же name="sending-${country.id}" для всех кнопок.

Попробуйте использовать name="sending-${e.id}".Тогда это будет sending-SG для id: "SG" и sending-TH для id: "TH".

...