使用div.style.display“block”：“none”隐藏/取消隐藏2个复选框

Question

点击时我有2 checkboxes隐藏/取消隐藏divs。

• 在初始页面加载时，如果fundingAvailable = false，则应隐藏上传。 （见图）

• 当用户点击Special Handling复选框时，上传应为hidden。 （见图）

• 当用户点击Override Funding复选框和fundingAvailable = false时，上传应为shown。 （见图）

这是我到目前为止所做的：

JSP

<INPUT TYPE="CHECKBOX" id="cbOverrideFunding" value="true" onclick="fundingAvailableWarning(<%=fundingAvailable%>)" >
<INPUT TYPE="CHECKBOX" ID="cbSpecialHandling" value="true" onclick="specialHandlingWarning()">

<% if(!fundingAvailable) { %>
    <TR>
      <TD height="90" valign="top"><BR>
        <div id="fundingAvailable" style="display: block">
           <b><i>The upload functionality has been disabled because the funding is missing.</i></b>
        </div>

        <div id="uploadFile">
         <INPUT name="File1" type="file" id="File1"/>
         <a href="fileUpload()">
           <IMG src="../../images/UploadFile.gif" alt="Upload File">
         </a>
        </div>
<% } %>
<% else { %>
    <div id="uploadFile">
      <INPUT name="File1" type="file" id="File1"/>
      <a href="fileUpload()">
        <IMG src="../../images/UploadFile.gif" alt="Upload File">
      </a>
    </div>

    <div id="uploadFileSpecialHandling" style="display: none">
      <b><i>The upload functionality has been disabled because of Special Handling.
      </i></b>
    </div>
<% } %>

的javascript

function specialHandlingWarning()
{
    if(document.getElementById("fundingAvailable").checked) {
        var div = document.getElementById("uploadFile");
        div.style.display = div.style.display == "none" ? "block" : "none";

        div = document.getElementById("uploadFileSpecialHandling");
        div.style.display = div.style.display == "none" ? "block" : "none";
    }
}

function fundingAvailableWarning(fundingAvailable)
{
    if(!fundingAvailable) {
        var div = document.getElementById("uploadFile");
        div.style.display = div.style.display == "none" ? "block" : "none";

        div = document.getElementById("fundingAvailable");
        div.style.display = div.style.display == "none" ? "block" : "none";
    }
}

我的问题是这两个div不能很好地融合在一起。

如果我先选择Special Handling，则会显示Upload页面并隐藏我的警告。

Answer 1

我会通过CSS控制所有内容，因此您只需要更改最父元素的类名。