Ненавязчивый 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>

Используя ненавязчивый Javascript, я беру идентификатор формы ("referralform"), создаю два массива для хранения идентификаторов связанных элементов, скрываю элементы, которые я хочу отключить, с помощью класса CSS, а затем применяю событие onclick, чтобы применить класс CSS, который показывает элементы:

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 срабатывает только при прямом щелчке внутри флажка, а не над ярлыком. Onclick отлично работает, когда применяется к метке переключателя, поэтому должно быть переключение между "1" и "0", которое выбрасывает что-то.

Любая помощь в этом с благодарностью.

Answer 1

Что я хотел бы сделать - и, фактически, то, что я делаю для сайта моего работодателя - это пометить элементы страницы классом "toggleOnSwitch" (я склонен использовать такие длинные раздражающие имена). В этом случае элемент также будет иметь несколько атрибутов "data-": "data-switch", содержащий значение "id" для флажка или переключателя или <option> элемент, управляющий переключением; "data-toggle-class", содержащий класс для включения и выключения (например, "скрытый" или "неактивный" или любой другой); и, может быть, один или два других я забыл.

Ненавязчивый JavaScript ищет этот класс, а затем для каждого переключаемого элемента он устанавливает обработчики событий на элементе switch (флажок, в вашем случае). Обработчики событий выполняют работу по добавлению / удалению класса из переключаемого элемента.

Это немного сложнее, чем если вы хотите включить радио-кнопки, потому что, когда одна радио-кнопка включается, все ее друзья выключаются, поэтому обработчик должен знать, чтобы запускать переключатели на всех других радио-кнопках с одинаковыми name, если они также контролируют видимость элемента страницы (или что бы ни делал добавленный / удаленный класс). Я также закодировал мой так, что если значение "data-switch" начинается с "!", Например "! ToggleCheckbox", то это означает изменение смысла переключения. Это удобно, когда определенный флажок выключает одну вещь одновременно с включением другой.