Как убрать / скрыть динамический переключатель по значению в JavaScript - PullRequest
Новая
       16

Как убрать / скрыть динамический переключатель по значению в JavaScript

0 голосов
/ 25 апреля 2019

Как убрать / скрыть переключатель по значению, используя javascript, а не jquery.У меня есть три радио-кнопки, которые имеют динамические идентификаторы и имя.Я хотел бы знать, как удалить переключатель по значениям

Я застрял не уверен, как это сделать в JavaScript, при загрузке страницы 

var option_value1= ["bank", "credit", "debit"]; //show all the three buttons
var option_value2= ["bank", "credit"] //show only bank and credit radio buttons.

<form>
 <input class="form-check-input" name="sending-${provider.id}" type="radio" id="provider-send-bank transfer-${provider.id}" value="bank" checked>
  <input class="form-check-input" name="sending-${provider.id}" type="radio" id="provider-send-credit-${provider.id}" value="credit">
  <input class="form-check-input" name="sending-${provider.id}" type="radio" id="provider-send-debit-${provider.id}" value="debit">
</form>


Expect Output:
according to option_value, display radio buttons

Ответы [ 2 ]

1 голос
/ 25 апреля 2019

Вы можете получить все form-check-input радиовходы, а затем отфильтровать каждый по их значению.Фильтр сохранит в массиве только те элементы, значение которых отсутствует в массиве option_value.Затем вы можете зациклить этот отфильтрованный массив и скрыть элементы.

См. Рабочий пример ниже: 

const option_values = [{
    id: "trans",
    options: ["bank", "credit"]
  },
  {
    id: "fund",
    options: ["bank"]
  }
];

const id = "trans";
const options = option_values.find(({id:x}) => x===id).options;

[...document.getElementsByClassName("form-check-input")].filter(({
  value
}) => !options.includes(value)).forEach(elem => elem.style.display = 'none');
<form>
  <input class="form-check-input" name="sending-${provider.id}" type="radio" id="provider-send-bank transfer-${provider.id}" value="bank" title="bank" checked>
  <input class="form-check-input" name="sending-${provider.id}" type="radio" id="provider-send-credit-${provider.id}" value="credit" title="credit">
  <input class="form-check-input" name="sending-${provider.id}" type="radio" id="provider-send-debit-${provider.id}" value="debit" title="debit">
</form>
0 голосов
/ 25 апреля 2019

если вы используете jquery 

$(':radio').each(function(){
    $(this).css('display', option_value.indexOf($(this).val()) === -1 ? 'none':'');
})

option_value это массив [string]

...