javascript - 使用 div.style.display "block": "none" to hide/unhide based on 2 checkboxes

Question

我有 2 个 checkboxes，单击它们时应该隐藏/取消隐藏 div。

• 在初始页面加载时，如果 fundingAvailable = false 应该隐藏上传。 (见图)

---

• 当用户单击特殊处理 复选框时，上传应该隐藏。 (见图)

---

• 当用户点击Override Funding 复选框并且fundingAvailable = false 时，应该显示 上传。 (见图)

---

这是我目前所拥有的:

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 不能一起玩。

如果我首先选择特殊处理，它会显示上传页面并隐藏我的警告。

Answer 1

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