Question

我一直在尝试尝试使其工作。

我有2个复选框作为移动CSS导航菜单的一部分。我有一个JavaScript，可防止一次打开多个复选框。可以。

现在，当我尝试选中其中任一复选框时，我正在尝试向正文中添加overflow:hidden，很明显，如果未选中任何复选框，则删除overflow:hidden，但是我似乎无法第一部分开始工作。

我对Java语言还很陌生，因此可以提供任何帮助。谢谢！

function selectOnlyThis(id){
  var myCheckbox = document.getElementsByName("nav-check");
  
  Array.prototype.forEach.call(myCheckbox,function(el){
    if (id != el)
    {
    	el.checked = false;
    }
  });

  if (id.checked == false)
  {
  	id.checked = false;
  } else
  {
   	id.checked = true; 
  } 
  if (id.checked == true)
  {
	$('body').css("overflow", "hidden");
  }
}

// Click, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

<div class="l-btn">
  <input id="lger" type="checkbox" name="nav-check" onclick="selectOnlyThis(this)"/>
  <label for="lger" onclick="topFunction()"><span></span><span></span</label>
</div>

<div class="r-btn">
  <input id="rger" type="checkbox"  name="nav-check" onclick="selectOnlyThis(this)"/>
  <label for="rger" onclick="topFunction()"><span></span><br/><div>Location</div></label>
</div>

Answer 1

可以做到

它接受对任何checkbox所做的所有更改，并检查ID是rger还是lger并选中复选框，然后更改css使用jquery。css（）方法。

<div class="r-btn">

<input id="rger" type="checkbox"  name="nav-check" />

<label for="rger" onclick="topFunction()"><span></span><br/><div>Location</div></label>

</div>






  $("input:checkbox").on('change', function () {

                    if (($(this).attr('id')=='rger' || $(this).attr('id')=='lger') && $(this).prop('checked')) {
                        $('body').css("overflow", "hidden");
                    }
                    else

                        $('body').css("overflow", "visible");

            });

请参阅此fiddle。

Answer 2

您似乎来自其他编程语言？ :) 您会喜欢javascript，例如第一个复选框的苗条功能。

function selectOnlyThis = ({ target }) => {
  const { id, checked } = target;
  id === 'rger' && checked && $('body').css("overflow", "hidden");
}

JavaScript主体溢出：隐藏

2 个答案: