选中单选按钮时如何仅显示两个按钮？答案

【问题标题】：How to display only two buttons when radio button is checked?选中单选按钮时如何仅显示两个按钮？
【发布时间】：2021-07-03 23:51:44
【问题描述】：

我有一个实现 3 个按钮的表单。每个按钮都提供不同的选项供用户选择。该页面仅呈现两个按钮，最后一个是隐藏的。我想根据单选按钮输入更改显示的内容。

这是我正在使用的 HTML 文档：

.hidden{
  display: none;
}

<label for="pay">Payment Option</label>
          <div class="row check">
            <div class="col-sm-6">          
              <input type="radio" id="gcash" name="pay" value="gcash" checked="checked"/>
              <label for="gcash" class="pay">Gcash</label>
            </div>
            <div class="col-sm-6">
              <input type="radio" id="walk" name="pay" value="unpaid"/>
              <label for="walk" class="pay">Walk In</label>
            </div>
     </div>

    <div class="buttons">
          <a href="#" class="res-btn" role="button">Back</a>
          <a href="#" class="res-btn" role="button">Proceed payment</a>
          <input type="submit" class="res-btn hidden" name="btn-submit" value="Submit">
    </div>

【问题讨论】：

onchange -> if value is -> show/hide
这能回答你的问题吗？ How to use jQuery to show/hide divs based on radio button selection?
您将不得不实现 JavaScript 伙伴，并动态更改最后一个按钮上隐藏的 CSS 类。 "class="res-btn hidden" 或者如果您根本不想隐藏这个词，您可以删除它，但这可能会给您带来验证问题。
@AbhishekPandey 对我不起作用

标签： javascript html radio-button hidden-field

【解决方案1】：

radio.addEventListener('change', function() {
    console.log(this.value)
});

使用此处理程序获取无线电数据

然后，找到你的元素并使用

element.classList.toggle("隐藏");

用于切换类名称，在您的 css 中使用

【讨论】：

如何切换？我不知道javascript。隐藏的类名是我的 CSS 中的显示块。
在“toggle()”方法中使用你自己的类名。此类应带有“显示：无；” CSS中的属性
“我如何切换它？”使用 element = document.getElementById(id); 找到您的元素并调用 element.classList.toggle("your_class");