如何 remove/hide 按 javascript 中的值动态单选按钮

Question

如何使用 javascript 而不是 jquery 按值 remove/hide 单选按钮。我有三个具有动态 ID 和名称的单选按钮。我想知道如何通过 values

删除单选按钮

我在 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

Answer 1

您可以获得所有 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>

Answer 2

如果你使用 jquery

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

option_value 是数组[字符串]

如何 remove/hide 按 javascript 中的值动态单选按钮

How to remove/hide the dynamic radio button by value in javascript

html

javascript

forms

radio