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

【问题标题】：Show/Hide a dropdown and button based on a checkbox in HTML and JQuery基于 HTML 和 JQuery 中的复选框显示/隐藏下拉菜单和按钮
【发布时间】：2013-02-27 19:42:25
【问题描述】：

我试图在 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();
}

当我选中该框时没有任何反应。关于我做错了什么的任何想法？此外，是否有任何关于如何在页面首次加载时隐藏下拉菜单和按钮的建议（我希望它们隐藏）。

【问题讨论】：

标签： javascript jquery html input checkbox

【解决方案1】：

那里有 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 的 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 = "";
    }
}

【讨论】：

我建议使用 change 事件而不是 click 事件。 IIRC 这两个事件触发的顺序取决于浏览器。
太好了，正是我需要的，谢谢！现在唯一的问题是，在表单首次加载时会显示下拉菜单和按钮，但我希望它们被隐藏。知道需要做什么才能使其正常工作吗？
@maloney 可以向 div 或单个元素添加样式属性，例如 style="display:none"，或者向要隐藏 onload 的元素添加一个类，例如 `class="hidden"' 并添加css 文件中类的隐藏样式。或者你可以将它添加到 jQuery 块中（请参阅上面的编辑）
@maloney 不要使用 $(function(){}); 而是将代码放在一个方法中并从 onclick 属性中调用它我已经发布了一个描述这个的答案
实际上，我已经做到了 - 需要将 "display:none" 添加到我想要隐藏的部分，而不仅仅是 div。感谢您的帮助

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

不要混合使用 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"
    }
}

【讨论】：