一旦选中了另一个单选按钮，如何使单选按钮和相关标签消失？ (Javascript)答案

【问题标题】：How do you make a radio button and associated label disappear once another radio button has been checked? (Javascript)一旦选中了另一个单选按钮，如何使单选按钮和相关标签消失？ (Javascript)
【发布时间】：2022-07-01 23:29:54
【问题描述】：

我正在构建一个预订表格，并且我让用户能够选择他们逗留的日期、时间和持续时间。

但是，这是限制开放时间，我希望用户能够选择一个时间，这反过来会隐藏超过午夜关闭时间的输入（在这种情况下，该值设置为 24 小时）

我正在尝试隐藏这两个元素以最大程度地减少用户输入错误。

我的代码如下，非常感谢任何可能提供帮助的人。

let dateRow = document.getElementById('dateCollapse');
let datePick = document.getElementById('dp1');
let showDate = document.getElementById('dateSelect');
let timeCell = document.getElementsByClassName('time-cell');
var tiSelect = document.getElementsByName('startTime');
var durSelect = document.getElementsByName('duration');
var durLabel = document.getElementsByClassName('durationLabel');


  function displayTime() {
  for(i = 0; i < tiSelect.length; i++) {
  if(tiSelect[i].checked)
    var timeDisplay = parseInt(tiSelect[i].value) % 12;
    if (timeDisplay === 0) timeDisplay = 12;
    document.getElementById("timeSelect").innerHTML = timeDisplay + " PM";
    for (x = 0; x < durSelect.length; x++) {
      var durDisplay = parseInt(durSelect[x].value);
      if (timeDisplay + durDisplay >= 24)
        
          var durId = durSelect[a].getAttribute('id');
          var durFor = durLabel.htmlFor;
          if (durId == durFor)
            durLabel.style.display = 'none';
        
        
    };

HTML

<div class="col-md-12">
                    <div class="row d-flex">
                        <div class="col mx-3 my-1 py-1 card-header bg-blk raj-wt fs-4 text-center">
                            Duration
                        </div>
                    </div>
                        <div class="row d-flex text-center mx-0">
                            <label for="1hr" for="1hr" class="col-4 mx-0 d-inline-block px-1 dur-cell durationLabel">
                                <span class="raj-wt text-center fs-6 py-1">
                                <input id="1hr" value="1" type="radio" onchange="displayEnd()" name="duration" ></input>
                                    1HR
                                </span>
                            </label>
                            <label for="2hrs" class="col-4 d-inline-block mx-0 px-1 dur-cell durationLabel">
                                <span class="raj-wt text-center fs-6 py-1">
                                <input id="2hrs" value="2" type="radio" onchange="displayEnd()" name="duration" ></input>
                                    2HRS
                                </span>
                            </label>
                            <label for="3hrs" class="col-4 d-inline-block mx-0 px-1 dur-cell durationLabel">
                                <span class="raj-wt text-center fs-6 py-1">
                                <input id="3hrs" value="3" type="radio" onchange="displayEnd()" name="duration" ></input>
                                    3HRS
                                </span>
                            </label>
                        </div>

我给你的 HTML 代码 sn-p 突出显示了一行（4 行中的 1 行），但我要实现的目标仍然适用。

非常感谢。

邓肯

【问题讨论】：

标签： javascript html radio-button label

【解决方案1】：

如果您不想在提交时获得该复选框，您可以使用 javascript 中的 remove() 方法将其从表单中删除。

【讨论】：