1

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

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

4

3 回答 3

7

那里有一些 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 = "";
    }
}
于 2013-03-12T10:36:53.160 回答
0

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

<INPUT TYPE="CHECKBOX" NAME="switchBox" onchange="showHideForm(this,'extra')">
于 2013-03-12T10:37:23.263 回答
0

不要混合使用 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"
    }
}
于 2013-03-12T10:51:27.707 回答