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

Question

我正在建立一个预订表格，我给用户选择日期，时间和他们的停留时间的能力。

但是，由于开放时间受到限制，我希望用户能够选择一个时间，这样就可以隐藏超过午夜关闭时间的输入(在本例中，值设置为24小时)。

我试图隐藏这两个元素，以尽量减少用户输入错误。

我的代码如下所示，非常感谢可能帮助我的人。

JS

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';
        
        
    };

<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代码片段突出了一行(4行中的1行)，但我要实现的目标的主体仍然适用。

非常感谢。

邓肯

Answer 1

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