javascript - 基于 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 的随机组合。如果你给你的复选框一个 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();
          }
    });
});

$('#checkboxID') 行可以更改为 $('input[name="switchBox"]') 如果你不想出于任何原因为复选框提供 ID。

下面是你的函数的返工这将隐藏和显示 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 = "";
    }
}