توضح هذه المقالة كيفية تعيين أزرار الراديو وخانات الاختيار والقوائم المنسدلة باستخدام DOM بواسطة JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
1. تعيين أزرار الراديو
زر الراديو في النموذج <input type = "Radio" />. إنها مجموعة من الكائنات للمستخدمين للاختيار ، ولكن يمكن اختيار واحد فقط في وقت واحد. لكل منها سمة محددة ، وعندما يختارها المرء على أنها حث ، يصبح الآخرون خطأ.
دعنا ننشر مثالًا أولاً:
انسخ الرمز كما يلي: <script type = "text/javaScript">
وظيفة getChoice () {
var oform = document.forms ["uform1"] ؛
var achoices = oform.camera ؛
لـ (i = 0 ؛ i <achoices.length ؛ i ++) // نقل جدول الخيار الفردي بأكمله
إذا (achoices [i]. تحقق) // الخروج إذا تم العثور على العنصر المحدد
استراحة؛
ALERT ("العلامة التجارية الكاميرا هي:" + achoices [i] .value) ؛
}
وظيفة setChoice (inum) {
var oform = document.forms ["uform1"] ؛
Oform.camera [inum].
}
</script>
<form method = "post" name = "uform1" Action = "AddInfo.aspx">
علامة الكاميرا:
<p>
<type type = "radio" name = "camera" id = "canon" value = "canon">
<label for = "canon"> canon </billy>
</p>
<p>
<type type = "radio" name = "camera" id = "nikon" value = "nikon">
<label for = "nikon"> nikon </billy>
</p>
<p>
<input type = "radio" name = "camera" id = "sony" value = "sony"
<label for = "sony"> Sony </billy>
</p>
<p>
<type type = "radio" name = "camera" id = "olympus" value = "olympus">
<label for = "olympus"> olympus </billy>
</p>
<p>
<type type = "radio" name = "camera" id = "samsung" value = "samsung">
<label for = "samsung"> samsung </billy>
</p>
<p>
<type type = "radio" name = "camera" id = "pentax" value = "pentax">
<label for = "pentax"> pentax </billy>
</p>
<p>
<type type = "radio" name = "camera" id = "others" value = "others">
<label for = "others"> الآخرين </label>
</p>
<p>
<type type = "submit" name = "btnsubmit" id = "btnsubmit" value = "submit">
</p>
<p>
<type type = "button" value = "اكتشاف كائن محدد" onClick = "getChoice () ؛">
<type type = "button" value = "set to canon" onClick = "setChoice (0) ؛">
</p>
</form>
زر الراديو في النموذج <input type = "Radio" />. إنها مجموعة من الكائنات للمستخدمين للاختيار ، ولكن يمكن اختيار واحد فقط في وقت واحد. لكل منها سمة محددة ، وعندما يختارها المرء على أنها حث ، يصبح الآخرون خطأ.
من الكود أعلاه ، يمكن ملاحظة أن المعرف والاسم مختلفان ، وأن أسمائهما متماثلان في مجموعة من أزرار الراديو ، ويتم تحديد واحد فقط. لا بد من المعرف إلى <blabe> أو غيرها من الخيارات.
من بين الرمز: الرمز للتحقق من الكائن المحدد هو (عندما تكون القيمة CHCKED لعنصر معين تور ، ينتهي اجتياز)
نسخة التعليمات البرمجية كما يلي: var oform = document.forms ["uform1"] ؛
var achoices = oform.camera ؛
لـ (i = 0 ؛ i <achoices.length ؛ i ++) // نقل جدول الخيار الفردي بأكمله
إذا (achoices [i]. تحقق) // الخروج إذا تم العثور على العنصر المحدد
استراحة؛
ALERT ("العلامة التجارية الكاميرا هي:" + achoices [i] .value) ؛
2. تعيين مربعات اختيار متعددة
على عكس أزرار الراديو ، يمكن تحديد خانة الاختيار <input type = "checkbox" /> في نفس الوقت للمعالجة. خانة الاختيار قبل كل بريد إلكتروني في صندوق البريد هو استخدام نموذجي.
انسخ الرمز كما يلي: <script type = "text/javaScript">
وظيفة checkbox () {
var str = document.getElementSbyName ("Hobby") ؛
var objarray = str.length ؛
var chestr = "" ؛
لـ (j = 0 ؛ j <objarray ؛ j ++) {
if (str [j]. checked == true) {
CHESTR + = str [j] .value + "،" ؛
}
}
if (CHESTR == "") {
تنبيه ("الرجاء تحديد هواية أولا ~!") ؛
} آخر {
تنبيه ("اختيارك الأول:" + CHESTR) ؛
}
}
Function ChangeBoxes (Action) {
var oform = document.forms ["myForm1"] ؛
var ocheckbox = oform.hobby ؛
لـ (var i = 0 ؛ i <ocheckbox.length ؛ i ++) // نقل كل خيار
إذا (الإجراء <0) // العكسي الاختيار
ocheckbox [i] .checked =! ocheckbox [i].
آخر // إذا كان الإجراء 1 ، حدد الكل ، وإذا كان 0 ، حدد الكل
ocheckbox [i] .cked = Action ؛
}
</script>
<form method = "post" name = "myForm1" Action = "AddInfo.aspx">
الأشياء التي تحب القيام بها:
<p>
<type type = "checkbox" name = "hobby" id = "ball" value = "ball">
<label for = "ball"> تشغيل كرة السلة </label>
</p>
<p>
<type type = "checkbox" name = "hobby" id = "tv" value = "tv">
<label for = "tv"> شاهد التلفزيون </label>
</p>
<p>
<type type = "checkbox" name = "hobby" id = "net" value = "net">
<label for = "net"> على الإنترنت </label>
</p>
<p>
<type type = "checkbox" name = "hobby" id = "book" value = "book">
<label for = "book"> القراءة </label>
</p>
<p>
<type type = "checkbox" name = "hobby" id = "trip" value = "trip">
<label for = "trip"> Travel </billy>
</p>
<p>
<type type = "checkbox" name = "hobby" id = "music" value = "music">
<label for = "music"> Music </billy>
</p>
<p>
<type type = "checkbox" name = "hobby" id = "others" value = "others">
<label for = "others"> الآخرين </label>
</p>
<p>
<type type = "button" value = "حدد All" onClick = "ChangeBoxes (1) ؛" />
<type type = "button" value = "لا تحديد على الإطلاق" onClick = "ChangeBoxes (0) ؛" />
<type type = "button" value = "anti-select" onClick = "ChangeBoxes (-1) ؛" />
<type type = "button" value = "submit" onClick = "checkbox ()" />
</p>
</form>
يتم تحديد مبدأ مربع الاختيار باستخدام القيمة المنطقية السمة المحددة. حدد الكل والتحديد غير المكتمل يمكن أن يمرر المعلمات في شكل 0 و 1.
3. القائمة المنسدلة
القائمة المنسدلة <SELECT> عبارة عن عنصر نموذج شائع الاستخدام. عندما يكون الانسحاب الخاص به قابلاً للراديو ، فإن وظيفة زر الراديو <type type = "Radio" /> هي نفسها وظيفة زر Radio Selectable. عندما تكون متعددة = "متعددة" متعددة قابلة للتحديد ، فإن الوظيفة تعادل خانة الاختيار ، لكن المنطقة المحتلة أصغر بكثير من خانة الاختيار.
الخصائص الشائعة للقوائم المنسدلة:
| ملكية | يوضح |
| طول | يشير إلى عدد الخيارات <point> |
| محدد | القيمة المنطقية التي تشير إلى ما إذا كان <spoint> يتم تحديده |
| SelectionIndex | الرقم التسلسلي للخيار المحدد هو -1 إذا لم يتم تحديد خيار. للحصول على القائمة المنسدلة المتعددة ، ارجع إلى الأول المحدد يبدأ رقم التسلسل من 0 |
| نص | نص الخيارات |
| قيمة | قيمة الخيار |
| يكتب | نوع القائمة المنسدلة ، إرجاع اختيار واحد اختيار واحد ، إرجاع متعدد الخيارات Select-Multiple |
| خيارات | احصل على مجموعة من الخيارات ، على سبيل المثال: Oselectbox.options [2] ، مما يشير إلى العنصر الثالث من Oselectbox في القائمة المنسدلة |
①. سحب القائمة لأسفل للحصول على قيمة واحدة
انسخ الرمز كما يلي: <script language = "javaScript">
وظيفة checksingle () {
var oform = document.forms ["myForm1"] ؛
var oselectbox = oform.constellation ؛
var ichoice = oselectbox.selectedIndex ؛ // احصل على عنصر محدد
ALERT ("لقد حددت" + oselectbox.options [ichoice] .text) ؛
}
</script>
<form method = "post" name = "myForm1">
<label for = "constellation"> علامة البروج: </label>
<p>
<SELECT ID = "Constellation" Name = "Constellation">
<Option Value = "ARIES" SELECTION = "SELECTER"> Aries </soph>
<Option Value = "Taurus"> Taurus </soph>
<Option Value = "Gemini"> Gemini </soph>
<Option Value = "Cancer"> Cancer </Option>
<Option Value = "Leo"> Lion </soph>
<Option Value = "Virgo"> virgo </soph>
<Option Value = "Libra"> libra </soph>
<Option Value = "Scorpio"> Scorpio </soph>
<value Option = "sagittarius"> snorker </portion>
<Option Value = "Capricorn"> Capricorn </soph>
<value Option = "Aquarius"> aquarius </portion>
<value Option = "pisces"> pisces </soph>
</select>
</p>
<type type = "button" onClick = "checksingle ()" value = "عرض خيارات" />
</form>
②. عندما تكون القائمة المنسدلة متعددة الاختيار ، خذ القيمة
انسخ الرمز كما يلي: <script type = "text/javaScript">
وظيفة checkmultiple () {
var oform = document.forms ["myForm1"] ؛
var oselectbox = oform.constellation ؛
var achoices = new array () ؛
// السفر في القائمة المنسدلة بأكملها
لـ (var i = 0 ؛ i <oselectbox.options.length ؛ i ++)
if (Oselectbox.options [i]. selected) // إذا تم تحديده
achoices.push (oselectbox.options [i] .text) ؛ // اضغط على الصفيف
ALERT ("لقد حددت:" + achoices.join ()) ؛ // نتيجة الإخراج
}
</script>
<form method = "post" name = "myForm1">
<label for = "constellation"> علامة البروج: </label>
<p>
<SELECT ID = "Constellation" name = "constellation" mostrial = "multiped" style = "الارتفاع: 180px ؛">
<Option Value = "ARIES"> Aries </Option>
<Option Value = "Taurus"> Taurus </soph>
<Option Value = "Gemini"> Gemini </soph>
<Option Value = "Cancer"> Cancer </Option>
<Option Value = "Leo"> Lion </soph>
<Option Value = "Virgo"> virgo </soph>
<Option Value = "Libra"> libra </soph>
<Option Value = "Scorpio"> Scorpio </soph>
<value Option = "sagittarius"> snorker </portion>
<Option Value = "Capricorn"> Capricorn </soph>
<value Option = "Aquarius"> aquarius </portion>
<value Option = "pisces"> pisces </soph>
</select>
</p>
<type type = "button" onClick = "checkmultiple ()" value = "View Options" />
</form>
③. القيمة العامة (شيء يسقط خيارات واحدة ومتعددة)
انسخ الرمز كما يلي: <script language = "javaScript">
وظيفة getSelectValue (المربع) {
var oform = document.forms ["myForm1"] ؛
var oselectbox = oform.elements [box] ؛ // يتم تحديد القائمة المنسدلة التحديد المقابل وفقًا للمعلمات
if (oselectbox.type == "Select-One") {// upp
var ichoice = oselectbox.selectedIndex ؛ // احصل على عنصر محدد
ALERT ("Single-select ، لقد حددت" + oselectbox.options [ichoice] .text) ؛
} آخر {
var achoices = new array () ؛
// السفر في القائمة المنسدلة بأكملها
لـ (var i = 0 ؛ i <oselectbox.options.length ؛ i ++)
if (Oselectbox.options [i]. selected) // إذا تم تحديده
achoices.push (oselectbox.options [i] .text) ؛ // اضغط على الصفيف
ALERT ("الاختيار من متعدد ، لقد حددت:" + achoices.join ()) ؛ // نتيجة الإخراج
}
}
</script>
<form method = "post" name = "myForm1">
كوكبة:
<p>
<SELECT ID = "Constellation1" name = "constellation1">
<Option Value = "ARIES" SELECTION = "SELECTER"> Aries </soph>
<Option Value = "Taurus"> Taurus </soph>
<Option Value = "Gemini"> Gemini </soph>
<Option Value = "Cancer"> Cancer </Option>
<Option Value = "Leo"> Lion </soph>
<Option Value = "Virgo"> virgo </soph>
<Option Value = "Libra"> libra </soph>
<Option Value = "Scorpio"> Scorpio </soph>
<value Option = "sagittarius"> snorker </portion>
<Option Value = "Capricorn"> Capricorn </soph>
<value Option = "Aquarius"> aquarius </portion>
<value Option = "pisces"> pisces </soph>
</select>
<type type = "button" onClick = "getSelectValue ('constellation1')" value = "View Options" />
</p>
<p>
<SELECT ID = "Constellation2" name = "constellation2" multives = "multible" style = "height: 120px ؛">
<Option Value = "ARIES"> Aries </Option>
<Option Value = "Taurus"> Taurus </soph>
<Option Value = "Gemini"> Gemini </soph>
<Option Value = "Cancer"> Cancer </Option>
<Option Value = "Leo"> Lion </soph>
<Option Value = "Virgo"> virgo </soph>
<Option Value = "Libra"> libra </soph>
<Option Value = "Scorpio"> Scorpio </soph>
<value Option = "sagittarius"> snorker </portion>
<Option Value = "Capricorn"> Capricorn </soph>
<value Option = "Aquarius"> aquarius </portion>
<value Option = "pisces"> pisces </soph>
</select>
<type type = "button" onClick = "getSelectValue ('constellation2')" value = "View Options" />
</p>
</form>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.