【发布时间】：2011-08-15 02:23:13
【问题描述】：
我正在学习如何编写不显眼的 Javascript，并且我已经能够解决大部分问题，但是我在使用复选框打开和关闭元素的可见性时遇到了麻烦。请记住，我首先是设计师，程序员，哦 18 岁左右。换句话说，在编程方面我是个新手。 （注意：此表格适用于牙髓公司推荐表格，因此是行业术语）。
另外，请不要推荐JQuery；我知道它存在，而且我经常使用它。我想学习如何在纯 Javascript 中实际做到这一点。以下是重要的 HTML sn-ps（这是在 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”之间的翻转，它会抛出一些东西。
非常感谢任何帮助。
【问题讨论】：
标签： javascript checkbox toggle visibility unobtrusive-javascript