不引人注目的JS：使用表单中的复选框切换元素可见性

时间：2011-04-28 22:06:07

标签： javascript checkbox toggle visibility unobtrusive-javascript

我正在学习如何编写不引人注目的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，我抓取表单ID（“referralform”），创建两个数组以包含相关的元素ID，使用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”之间的翻转，这会使某些东西掉落。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分：0)

我会做什么 - 实际上我为我的雇主的网站所做的 - 是用一个类标记页面元素，“toggleOnSwitch”（我倾向于使用这样令人恼火的长名字）。该元素还将具有一些“数据 - ”属性：“数据切换”，包含复选框或单选按钮的“id”值或控制切换的<option>元素; “data-toggle-class”，包含要打开和关闭的类（如“隐藏”或“非活动”或其他）;也许还有一两个我忘记了。

不显眼的JavaScript查找该类，然后对于每个切换元素，它在switch元素上设置事件处理程序（在您的情况下为复选框）。事件处理程序执行从切换元素添加/删除类的工作。

如果你想在单选按钮上切换，那要复杂一点，因为当一个单选按钮切换 on 时，所有的朋友都会关闭 ，所以处理程序必须知道在所有其他具有相同名称的单选按钮上触发切换处理程序，以防它们也控制页面元素可见性（或者添加/删除的类所做的任何事情）。我还编写了我的编码，以便如果“数据切换”值以“！”开头，如“！toggleCheckbox”，那么这意味着反转切换的意义。当一个特定的复选框在切换另一个东西的同时关闭一个东西时，这很方便。

相关问题
最新问题