Question

我正在处理表单，并且仅当在“是”上选中了单选，并且仅当单击“否时，元素仍然存在”时，才需要显示某些输入。

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”]有问题，但是当我将其更改为radio ...没关系时。

我可以在这里否定地使用皮革吗？

编辑：

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

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

“否”选项（hotelHide）仍然不会触发添加皮革。

Answer 1

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

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

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

Answer 2

解决方案是将const hide = document.querySelector（'＃falseradio'）;添加到我的init函数中。然后将target.checked = true更改为target.value ==='0'。最初，我只是将其设置为='0'，而不检查它是否存在。一旦我添加了其他=便可以了。

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

2 个答案: