显示/隐藏基于HTML和JQuery复选框的下拉菜单和按钮

Show/Hide a dropdown and button based on a checkbox in HTML and JQuery

本文关键字：JQuery 复选框 下拉菜单 按钮 HTML 隐藏 显示      更新时间：2023-09-26

我试图在HTML中显示/隐藏下拉列表和按钮，但有问题试图让它工作。这是HTML的设置:

<td valign="top">
    <INPUT TYPE="CHECKBOX" NAME="switchBox" onClick="showHideForm(this,'extra')"> 
</td>
<div id="extra">
   <td valign="top"><form:select path="uSelectedSystemId" id="uSelectedSystemId"></form:select> </td>
   <td valign="top"><button type="button" id="fUndelete">Undelete</button</td>
</div>

，这是函数:

function showHideForm(box, id) {
    var elm = document.getElementById(id);
    elm.style.display = box.checked ? $('#uSelectedSystemId').hide() : $('#uSelectedSystemId').show();
    elm.style.display = box.checked ? $('#fUndelete').hide() : $('#fUndelete').show();
}

当我选中这个方框时，什么也没有发生。有什么想法我做错了吗?此外，有关于如何隐藏下拉框和按钮当页面第一次加载时，它正在显示(我希望他们隐藏)的任何建议。

jQuery和javascript的随机组合。如果你给你的复选框一个ID，你可以简单地做如下操作

$(function(){
    $('#uSelectedSystemId').hide();  //Hide the elements onload
    $('#fUndelete').hide();          //Hide the elements onload
    $('#checkboxID').click(function(){
          if($(this).is(':checked')){
              $('#uSelectedSystemId').show();
              $('#fUndelete').show();
          } else {
              $('#uSelectedSystemId').hide();
              $('#fUndelete').hide();
          }
    });
});

如果您出于某种原因不想给复选框一个ID，则可以将$('#checkboxID')行更改为$('input[name="switchBox"]')。

下面是你的函数的重写这将隐藏并显示id为extra的DIV。上面的代码不会隐藏div里面的两个元素。这可以通过

轻松调整
//Pure javascript version
function showHideForm(box, id) {
    var elm = document.getElementById(id);
    if(box.checked){
        elm.style.display = "none";
    } else {
        elm.style.display = "";
    }
}

在复选框的onchange事件时调用函数

<INPUT TYPE="CHECKBOX" NAME="switchBox" onchange="showHideForm(this,'extra')">

不要混合使用jQuery和纯JavaScript，

<INPUT TYPE="CHECKBOX" NAME="switchBox" style="display:none" onClick="showHideForm()">

的事情应该是这样的jQuery: 

function showHideForm() {
    if($('#checkboxID').is(':checked')){
        $('#uSelectedSystemId').hide();
        $('#fUndelete').hide();
    }else {
              $('#uSelectedSystemId').show();
              $('#fUndelete').show();
    }
}
纯js: 

function showHideForm(){
    if(document.getElementById('checkboxID').checked){
        document.getElementById("uSelectedSystemId").style.display="none"
        document.getElementById("fUndelete").style.display="none"
    }else{
        document.getElementById("uSelectedSystemId").style.display="block"
        document.getElementById("fUndelete").style.display="block"
    }
}
相关文章：