JavaScript 基于单选按钮显示/隐藏页面元素答案

【问题标题】：JavaScript Show/Hide Page Elements Based on Radio ButtonJavaScript 基于单选按钮显示/隐藏页面元素
【发布时间】：2020-01-12 12:24:45
【问题描述】：

我正在处理一个表单，并且只需要在选中单选时显示某些输入是并且它可以工作...但是当我单击否时，元素仍然存在。

const sharing = document.querySelector('.sharing');
const twoBeds = document.querySelector('.two-beds');
const shareInput = document.querySelector('#occupant_share');
const hotelShow = document.querySelector('#occupant_hotel_0');
const hotelElement = document.querySelector('#occupant_hotel_1');
function init() {
  hotelShow.addEventListener('change', showHideShare);
  hotelElement.addEventListener('change', showHideShare);
  shareInput.addEventListener('change', showHideBeds);
}

let showHideShare = event => {
  event.preventDefault();
  showHide(event.currentTarget, sharing);
};

let showHideBeds = event => {
  event.preventDefault();
  const target = event.currentTarget;
  showHide(target, twoBeds);
  const roommate = document.querySelector('.roommate');
  if (target.checked == true) {
    roommate.classList.remove('hide');
  } else {
    roommate.classList.add('hide');
    roommate.querySelector('#occupant_roommate').value = null;
  }
};

let showHide = (target, div) => {
  if (target.checked) {
    div.classList.remove('hide');
  } else {
    div.classList.add('hide');
    div.querySelectorAll('input[type="radio"]').forEach(function(el) {
      el.checked = false;
    });
    const beds = div.querySelector('.two-beds');
    if (beds) beds.classList.add('hide');
    const roommate = div.querySelector('#occupant_roommate');
    if (roommate) roommate.value = null;
  }
};

HTML 看起来像：

 <div class="row form-group">
   <label class="col-sm-5 control-label">Do You Need A Hotel Room?</label>
   <div class="col-sm-4 d-flex justify-content-start form-check form-check-inline hotel-radio">
     <input class="form-check-input" type="radio" value="0" name="occupant[hotel]" id="occupant_hotel_0">
     <label class="form-check-label" for="occupant_Yes">Yes</label>
     <input class="form-check-input" type="radio" value="1" checked="checked" name="occupant[hotel]" id="occupant_hotel_1">
     <label class="form-check-label" for="occupant_No">No</label>
   </div>
 </div>
 <div class="sharing">
   <div class="row form-group">
     <label class="col-sm-5 control-label">Check In</label>
     <input class="form-control col-sm-4" type="date" name="occupant[check_in]" id="occupant_check_in">
   </div>
   <div class="row form-group">
     <label class="col-sm-5 control-label">Check Out</label>
     <input class="form-control col-sm-4" type="date" name="occupant[check_out]" id="occupant_check_out">
   </div>
   <div class="row form-group room-info">
     <label class="col-sm-5 control-label">Sharing Room</label>
     <div class="col-sm-4 d-flex justify-content-start form-check-inline sharing-radio">
       <input name="occupant[share]" type="hidden" value="0">
       <input type="checkbox" value="1" name="occupant[share]" id="occupant_share">
       <input class="form-check-input" type="radio" value="0" name="occupant[share]" id="occupant_share_0">
       <label class="form-check-label" for="occupant_Yes">Yes</label>
       <input class="form-check-input" type="radio" value="1" checked="checked" name="occupant[share]" id="occupant_share_1">
       <label class="form-check-label" for="occupant_No">No</label>
     </div>
   </div>
   <div class="row form-group roommate hide">
     <label class="col-sm-5 control-label">Roommate Name</label>
     <input class="form-control col-sm-4" type="text" name="occupant[roommate]" id="occupant_roommate">
   </div>
   <div class="row form-group two-beds hide">
     <label class="col-sm-5 control-label">Request Two Beds</label>
     <div class="col-sm-4 d-flex justify-content-start form-check form-check-inline">
       <input class="form-check-input" type="radio" value="0" name="occupant[two_beds]" id="occupant_two_beds_0">
       <label class="form-check-label" for="occupant_Yes">Yes</label>
       <input class="form-check-input" type="radio" value="1" name="occupant[two_beds]" id="occupant_two_beds_1">
       <label class="form-check-label" for="occupant_No">No</label>
     </div>
   </div>
 </div>

这个想法是，单击“是”（hotelShow）后，它将显示所有分配了共享类的元素。我抓住 No (hotelElement) 只是为了抓住它，看看我是否需要在这里做点什么。

如果我使用复选框，不用担心，但是我想使用单选按钮并触发事件。一旦我可以让它工作，我会在两张床上做同样的事情（shareInput）。

我认为这是我的 showHide 中的 input[type="checkbox"] 的问题，但是当我将其更改为收音机时......没关系。

有没有办法让我在 No 上应用隐藏？

编辑：

我想我可以添加以下内容：

const hotelHide = document.querySelector('#occupant_hotel_1');
 function init() {
 same code
 hotelHide.addEventListener('change', hideNope);
}
let hotelNope = event => {
 event.preventDefault();
 hideShare(event.currentTarget, sharing);
}
let hideShare = (target, div) => {
 if (target.checked = true) {
  div.classList.add('hide');
 } else {
  div.classList.remove('hide');
  }
 }

No 选项 (hotelHide) 仍然不会触发隐藏的添加。

【问题讨论】：

const sharing = document.querySelector('.sharing'); 在运行时获取第一个具有“共享”类的元素......我猜这不是你想要的。我猜是因为你没有在这里显示你的 HTML，所以我们必须猜测结构。如果您可以在Stack Snippet 中与 HTML 共享 minimal reproducible example，那就太好了，以便给出适当的建议。
此外，单选按钮通常与几个具有相同名称的按钮组合在一起。任何时候都至少选中一个带有每个名称的单选按钮。将它们全部设置为未选中是奇怪的。
在 HTML 中添加。共享包含我想要包含的所有输入。这是一个在点击否时隐藏它们的问题。

标签： javascript

【解决方案1】：

您想更新单选按钮的选中状态，例如...

document.querySelector('#targetRadioButton').addEventListener('click', function() {
    document.querySelector('#targetRadioButton').checked = !document.querySelector('#targetRadioButton').checked;
}

更新以反映添加点击事件。

【讨论】：

所以我想我只需要将 div.querySelectorAll('input[type="radio"]) 的 let showHide 更新为 ('[value="1"]) 为有一个检查=假。那没有用。你想在哪里添加那条线？
这只是一种方式，但您可以将其设置为单选按钮本身的单击事件。因此，当它被点击时，它会检查切换真/假。

【解决方案2】：

解决方案是在我的初始化函数中添加 const hide = document.querySelector('#falseradio');然后将 target.checked = true 更改为 target.value === '0'。最初我只是将它设置为 = '0' 而不是检查它是否存在。一旦我添加了额外的 =，它就起作用了。

【讨论】：