1
눈에 잘 띄지 않는 자바 스크립트를 작성하는 방법을 배우고 있습니다. 대부분의 작업을 수행 할 수 있었지만 요소의 가시성을 켜거나 끄는 데 문제가 있습니다. 체크 박스. 필자는 프로그래머 인 제 18 위 또는 제 1 디자이너입니다. 즉, 프로그래밍에 관해서는 초보자입니다. (참고 :이 양식은 근관 전문의 추천 양식 용이므로 업계 용어입니다).눈에 잘 띄지 않는 JS : 체크 박스를 사용하여 요소의 가시성을 전환하십시오.
또한 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>
이 눈에 거슬리지 자바 스크립트를 사용하여, 나는 관련 요소를 포함하는 두 개의 배열을 생성, 양식 ID ("referralform")를 잡아 오프/
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);
가능성에 "만들 수있는 훨씬 더 좋은 방법이있다 : ID를, 나는 CSS 클래스를 해제 할 요소를 숨긴 다음 요소를 드러내는 CSS 클래스를 적용 할 수있는 온 클릭 이벤트를 적용 ""1 "과"0 "을 사용하고 플 리핑하는 것보다 확인란의 설정을 토글합니다 그들 사이에,하지만 다시, 나는 프로그래머가 아니야. 문제는 "1"과 "0"사이에 플립을 적용 할 때 onclick 이벤트는 라벨이 아닌 체크 상자를 직접 클릭 할 때만 작동한다는 것입니다. onclick은 라디오 버튼의 레이블에 적용 할 때 잘 작동하므로 "1"과 "0"사이의 뒤집기가 있어야합니다.
이 문제에 대한 도움을 주시면 대단히 감사하겠습니다.