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

Question

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

当我选中该框时，没有任何反应。你知道我做错了什么吗？此外，有任何建议如何隐藏下拉菜单和按钮时，页面第一次加载时，它是显示的时刻(我希望他们隐藏)。

Answer 1

这里有一点jQuery和javascript的随机混合。如果您为checkbox提供了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 = "";
    }
}

Answer 2

在checkbox的onchange事件上调用函数

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

Answer 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"
    }
}