Unobtrusive JS：在表單中使用復選框切換元素可見性

Question

我正在學習如何編寫不顯眼的 Javascript，並且我已經能夠解決大多數問題，但是我在使用復選框打開和關閉元素的可見性時遇到了麻煩。 請記住，我首先是設計師，程序員，哦 18 歲左右。 換句話說，在編程方面我是個新手。 （注：此表格適用於牙髓公司推薦表格，因此是行業術語）。

另外，請不要推薦 JQuery； 我知道它存在，而且我經常使用它。 我想學習如何在純 Javascript 中實際執行此操作。 以下是重要的 HTML 片段（這是在 asp.NET 中創建的）：

<ol>
<li>
    <fieldset>
        <legend>Which of these procedures is required? (select at least one)<span class="required"> *</span></legend>
        <label id="procedure01"><asp:CheckBox ID="chkEndodonticProcedure01" GroupName="EndodonticProcedure" runat="server" />Consultation for evaluation of tooth</label>
        <label id="procedure02"><asp:CheckBox ID="chkEndodonticProcedure02" GroupName="EndodonticProcedure" runat="server" />Re-treatment of tooth</label>
        <label id="procedure03"><asp:CheckBox ID="chkEndodonticProcedure03" GroupName="EndodonticProcedure" runat="server" />Treatment of tooth</label>
    </fieldset>
    <ol id="consultation">
        <li>
            <asp:Label ID="lblConsultationToothNumber" AssociatedControlID="txtConsultationToothNumber" runat="server">Consultation tooth number</asp:Label>
            <asp:TextBox id="txtConsultationToothNumber" CssClass="textbox" runat="server" />
        </li>
        <li>
            <fieldset>
                <legend>Do any of these conditions apply?</legend>
                <label><asp:CheckBox ID="chkToothCondition01" GroupName="ToothCondition" runat="server" />Vague toothache</label>
                <label><asp:CheckBox ID="chkToothCondition02" GroupName="ToothCondition" runat="server" />Pain, swelling</label>
                <label><asp:CheckBox ID="chkToothCondition03" GroupName="ToothCondition" runat="server" />Sensitivity to heat</label>
                <label><asp:CheckBox ID="chkToothCondition04" GroupName="ToothCondition" runat="server" />Sensitivity to cold</label>
                <label><asp:CheckBox ID="chkToothCondition05" GroupName="ToothCondition" runat="server" />Sensitivity to percussion</label>
                <label><asp:CheckBox ID="chkToothCondition06" GroupName="ToothCondition" runat="server" />Possible combined perio-endo lesion</label>
                <label><asp:CheckBox ID="chkToothCondition07" GroupName="ToothCondition" runat="server" />Suspected cracked tooth/root</label>
            </fieldset>
        </li>
    </ol>
    <ol id="retreatment">
        <li>
            <asp:Label ID="lblRetreatmentToothNumber" AssociatedControlID="txtRetreatmentToothNumber" runat="server">Re-treatment tooth number</asp:Label>
            <asp:TextBox id="txtRetreatmentToothNumber" CssClass="textbox" runat="server" />
        </li>
        <li>
            <asp:Label ID="lblPreviousRCTDate" AssociatedControlID="txtPreviousRCTDate" runat="server">Date of previous RCT</asp:Label>
            <asp:TextBox id="txtPreviousRCTDate" CssClass="textbox datepicker" runat="server" />
        </li>
    </ol>
    <ol id="treatment">
        <li>
            <asp:Label ID="lblTreatmentToothNumber" AssociatedControlID="txtTreatmentToothNumber" runat="server">Treatment tooth number</asp:Label>
            <asp:TextBox id="txtTreatmentToothNumber" CssClass="textbox" runat="server" />
        </li>
        <li>
            <fieldset>
                <legend>What is the reason for treatment? (check any that apply)</legend>
                <label><asp:CheckBox ID="chkTreatmentReason01" GroupName="TreatmentReason" runat="server" />Necessary for proper restoration</label>
                <label><asp:CheckBox ID="chkTreatmentReason02" GroupName="TreatmentReason" runat="server" />Pulp exposed and vital</label>
                <label><asp:CheckBox ID="chkTreatmentReason03" GroupName="TreatmentReason" runat="server" />Pulp exposed and non-vital</label>
                <label><asp:CheckBox ID="chkTreatmentReason04" GroupName="TreatmentReason" runat="server" />Tooth was opened and medicated</label>
                <label><asp:CheckBox ID="chkTreatmentReason05" GroupName="TreatmentReason" runat="server" />X-ray revealed radiolucency/pulpal involvement</label>
            </fieldset>
        </li>
        <li>
            <fieldset>
                <legend>Is an X-ray included for revealed radiolucency/pulpal involvement?</legend>
                <label><asp:RadioButton ID="rdoXrayIncluded01" GroupName="XrayIncluded" runat="server" />Yes</label>
                <label><asp:RadioButton ID="rdoXrayIncluded02" GroupName="XrayIncluded" runat="server" />No</label>
            </fieldset>
        </li>
    </ol>
</li>

Using unobtrusive Javascript, I grab the form ID ("referralform"), create two arrays to contain the related element IDs, hide the elements I want turned off with a CSS class, and then apply the onclick event to apply the CSS class that reveals要素：

function prepareAccordion()
{
if (document.getElementById && document.getElementsByTagName)
{
    if (document.getElementById("referralform"))
    {
        var accordionids = new Array();
        accordionids[0] = document.getElementById("minorparent");
        accordionids[1] = document.getElementById("consultation");
        accordionids[2] = document.getElementById("retreatment");
        accordionids[3] = document.getElementById("treatment");

        var revealids = new Array();
        revealids[0] = document.getElementById("minorYes");
        revealids[1] = document.getElementById("minorNo");
        revealids[2] = document.getElementById("procedure01");
        revealids[3] = document.getElementById("procedure02");
        revealids[4] = document.getElementById("procedure03");

        for (var i = 0; i < accordionids.length; i++)
        {
            accordionids[i].className = "accordion-collapsed";
        }

        revealids[0].onclick = function revealAccordion()
        {
            accordionids[0].className = "accordion-revealed";
        }

        revealids[1].onclick = function revealAccordion()
        {
            accordionids[0].className = "accordion-collapsed";
        }

        x = 0;
        revealids[2].onclick = function revealAccordion()
        {
            if (x == 0)
            {
                accordionids[1].className = "accordion-revealed";
                x++;
            }
            else
            {
                accordionids[1].className = "accordion-collapsed";
                x--;
            }
        }

        y = 0;
        revealids[3].onclick = function revealAccordion()
        {
            if (y == 0)
            {
                accordionids[2].className = "accordion-revealed";
                y = 1;
            }
            else
            {
                accordionids[2].className = "accordion-collapsed";
                y = 0;
            }
        }

        z = 0;
        revealids[4].onclick = function revealAccordion()
        {
            if (z == 0)
            {
                accordionids[3].className = "accordion-revealed";
                z = 1;
            }
            else
            {
                accordionids[3].className = "accordion-collapsed";
                z = 0;
            }
        }
    }
}
}

function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function')
{
    window.onload = func;
}
else
{
    window.onload = function ()
    {
        if (oldonload)
        {
            oldonload();
        }
        func();
    }
}
}

addLoadEvent(prepareAccordion);

與使用“1”和“0”並在它們之間翻轉相比，為復選框創建“開/關”切換設置可能有更好的方法，但同樣，我不是程序員。 問題是當應用“1”和“0”之間的翻轉時，onclick 事件僅在直接單擊復選框時有效，而在 label 上無效。 當應用於單選按鈕的 label 時，onclick 工作正常，所以它必須是“1”和“0”之間的翻轉，這一定是拋出了一些東西。

對此的任何幫助將不勝感激。

Answer 1

我會做的——事實上，我為雇主的網站做的——是用 class 標記頁面元素，“toggleOnSwitch”（我傾向於使用像這樣令人討厭的長名稱）。 然后該元素還將具有幾個“data-”屬性：“data-switch”，包含復選框或單選按鈕或控制切換的<option>元素的“id”值； “data-toggle-class”，包含 class 以打開和關閉（例如，“隱藏”或“非活動”或其他）； 也許還有一兩個我忘記了。

不顯眼的 JavaScript 會查找該 class，然后為每個切換的元素在開關元素上設置事件處理程序（復選框，在您的情況下）。 事件處理程序執行從切換元素添加/刪除 class 的工作。

如果你想在單選按鈕上切換，這比這要復雜一些，因為當一個單選按鈕打開時，它的所有朋友都會關閉，所以處理程序必須知道觸發所有其他單選按鈕上的切換處理程序。名稱，以防它們還控制頁面元素的可見性（或添加/刪除的 class 所做的任何事情）。 我還編寫了我的代碼，以便如果“data-switch”值以“，”開頭，例如“.toggleCheckbox”。 那么這意味着反轉切換的感覺。 當一個特定的復選框在關閉一件事的同時打開另一件事時，這很方便。