JS วิธีตั้งปุ่มตัวเลือกกล่องกาเครื่องหมายและเมนูแบบเลื่อนลงโดยใช้ DOM

บทความนี้อธิบายถึงวิธีการตั้งปุ่มตัวเลือกกล่องกาเครื่องหมายและเมนูแบบเลื่อนลงโดยใช้ DOM โดย JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:

1. ตั้งปุ่มตัวเลือก

ปุ่มตัวเลือกอยู่ในรูปแบบ <อินพุต Type = "Radio" /> มันเป็นชุดของวัตถุสำหรับผู้ใช้ที่จะเลือก แต่สามารถเลือกได้ครั้งละหนึ่งรายการ แต่ละรายการมีแอตทริบิวต์ตรวจสอบและเมื่อมีการเลือกเป็น ture คนอื่น ๆ จะกลายเป็นเท็จ

ลองโพสต์ตัวอย่างก่อน:

คัดลอกรหัสดังนี้: <script type = "text/javascript">

ฟังก์ชั่น getChoice () {

var oform = document.forms ["uform1"];

var achoices = Oform.camera;

สำหรับ (i = 0; i <achoices.length; i ++) // ถ่ายโอนตารางตัวเลือกเดียวทั้งหมด

ถ้า (achoices [i]. ตรวจสอบ) // ออกหากพบรายการที่เลือก

หยุดพัก;

การแจ้งเตือน ("แบรนด์กล้องคือ:" + ACHOICES [i] .Value);

-

ฟังก์ชั่น setChoice (inum) {

var oform = document.forms ["uform1"];

Oform.camera [inum]. ตรวจสอบ = true;

-

</script>

<form method = "post" name = "uform1" action = "addinfo.aspx">

แบรนด์กล้อง:

<p>

<อินพุต type = "Radio" name = "camera" id = "canon" value = "canon">

<label for = "canon"> canon </lable>

</p>

<p>

<อินพุต type = "Radio" name = "camera" id = "nikon" value = "nikon">

<label for = "nikon"> nikon </label>

</p>

<p>

<input type = "Radio" name = "camera" id = "sony" value = "sony" ตรวจสอบ> ตรวจสอบ>

<label for = "sony"> sony </lable>

</p>

<p>

<อินพุต type = "Radio" name = "camera" id = "Olympus" value = "Olympus">

<label for = "Olympus"> Olympus </label>

</p>

<p>

<อินพุต type = "Radio" name = "camera" id = "samsung" value = "samsung">

<label for = "samsung"> samsung </label>

</p>

<p>

<input type = "Radio" name = "camera" id = "pentax" value = "pentax">

<label for = "pentax"> pentax </label>

</p>

<p>

<input type = "Radio" name = "camera" id = "อื่น ๆ " value = "อื่น ๆ ">

<label for = "อื่น ๆ "> อื่น ๆ </label>

</p>

<p>

<input type = "subment" name = "btnsubmit" id = "btnsubmit" value = "ส่ง">

</p>

<p>

<อินพุต type = "ปุ่ม" value = "ตรวจจับวัตถุที่เลือก" onclick = "getChoice ();">

<อินพุต type = "ปุ่ม" value = "ตั้งค่าเป็น canon" onclick = "setChoice (0);">

</p>

</form>

ปุ่มตัวเลือกอยู่ในรูปแบบ <อินพุต Type = "Radio" /> มันเป็นชุดของวัตถุสำหรับผู้ใช้ที่จะเลือก แต่สามารถเลือกได้ครั้งละหนึ่งรายการ แต่ละรายการมีแอตทริบิวต์ตรวจสอบและเมื่อมีการเลือกเป็น ture คนอื่น ๆ จะกลายเป็นเท็จ

จากรหัสด้านบนจะเห็นได้ว่า ID และชื่อนั้นแตกต่างกันและชื่อของพวกเขาจะเหมือนกันในชุดปุ่มตัวเลือกและเลือกเพียงอันเดียว ID ถูกผูกไว้กับ <darble> หรือตัวเลือกอื่น ๆ

ในบรรดารหัส: รหัสเพื่อตรวจสอบวัตถุที่เลือกคือ (เมื่อค่า chcked ของรายการบางรายการคือ ture, traversal สิ้นสุดลง)

การคัดลอกรหัสมีดังนี้: var oform = document.forms ["uform1"];

var achoices = Oform.camera;

สำหรับ (i = 0; i <achoices.length; i ++) // ถ่ายโอนตารางตัวเลือกเดียวทั้งหมด

ถ้า (achoices [i]. ตรวจสอบ) // ออกหากพบรายการที่เลือก

หยุดพัก;

การแจ้งเตือน ("แบรนด์กล้องคือ:" + ACHOICES [i] .Value);

2. ตั้งค่าหลายกล่องการเลือก

แตกต่างจากปุ่มตัวเลือกช่องทำเครื่องหมาย <input type = "ช่องทำเครื่องหมาย" /> สามารถเลือกได้ในเวลาเดียวกันสำหรับการประมวลผล ช่องทำเครื่องหมายก่อนอีเมลแต่ละฉบับในกล่องจดหมายเป็นการใช้งานทั่วไป

คัดลอกรหัสดังนี้: <script type = "text/javascript">

ช่องทำเครื่องหมายฟังก์ชั่น () {

var str = document.getElementsByName ("Hobby");

var objarray = str.length;

var chestr = "";

สำหรับ (j = 0; j <objarray; j ++) {

if (str [j] .Chected == true) {

chestr + = str [j] .value + ",";

-

-

if (chestr == "") {

การแจ้งเตือน ("โปรดเลือกงานอดิเรกก่อน ~!");

} อื่น {

การแจ้งเตือน ("การเลือกครั้งแรกของคุณ:" + chestr);

-

-

ฟังก์ชัน ChangeBoxes (การกระทำ) {

var oform = document.forms ["myform1"];

var ocheckbox = Oform.hobby;

สำหรับ (var i = 0; i <ocheckbox.length; i ++) // โอนแต่ละตัวเลือก

if (action <0) // การเลือกย้อนกลับ

Ocheckbox [i] .Checked =! ocheckbox [i]. ตรวจสอบ;

อื่น // ถ้าการกระทำคือ 1 เลือกทั้งหมดและถ้าเป็น 0 ให้เลือกทั้งหมด

Ocheckbox [i] .Checked = action;

-

</script>

<form method = "post" name = "myform1" action = "addinfo.aspx">

สิ่งที่คุณชอบทำ:

<p>

<อินพุต type = "ช่องทำเครื่องหมาย" name = "Hobby" id = "ball" value = "Ball">

<label for = "ball"> เล่นบาสเก็ตบอล </label>

</p>

<p>

<อินพุต type = "ช่องทำเครื่องหมาย" name = "Hobby" id = "TV" value = "TV">

<label for = "tv"> ดูทีวี </label>

</p>

<p>

<อินพุต type = "ช่องทำเครื่องหมาย" name = "Hobby" id = "net" value = "net">

<label for = "net"> บนอินเทอร์เน็ต </lable>

</p>

<p>

<อินพุต type = "ช่องทำเครื่องหมาย" name = "Hobby" id = "Book" value = "Book">

<label for = "book"> การอ่าน </label>

</p>

<p>

<อินพุต type = "ช่องทำเครื่องหมาย" name = "Hobby" id = "trip" value = "Trip">

<label for = "trip"> travel </lable>

</p>

<p>

<อินพุต type = "ช่องทำเครื่องหมาย" name = "Hobby" id = "music" value = "music">

<label for = "music"> เพลง </label>

</p>

<p>

<อินพุต type = "ช่องทำเครื่องหมาย" name = "Hobby" id = "อื่น ๆ " value = "อื่น ๆ ">

<label for = "อื่น ๆ "> อื่น ๆ </label>

</p>

<p>

<อินพุต type = "ปุ่ม" value = "เลือกทั้งหมด" onClick = "ChangeBoxes (1);" -

<อินพุต type = "ปุ่ม" value = "ไม่มีการเลือกเลย" onClick = "ChangeBoxes (0);" -

<อินพุต type = "button" value = "anti-select" onclick = "ChangeBoxes (-1);" -

<อินพุต type = "button" value = "ส่ง" onclick = "ช่องทำเครื่องหมาย ()" />

</p>

</form>

หลักการของช่องทำเครื่องหมายถูกกำหนดโดยใช้ค่าบูลีนแอตทริบิวต์ที่ตรวจสอบแล้ว เลือกการเลือกทั้งหมดและไม่สมบูรณ์สามารถผ่านพารามิเตอร์ในรูปแบบของ 0 และ 1

3. เมนูแบบดึงลง

เมนูแบบเลื่อนลง <Select> เป็นองค์ประกอบรูปแบบที่ใช้กันทั่วไป เมื่อการเลื่อนลงคือการเลือกวิทยุฟังก์ชั่นของปุ่มตัวเลือก <อินพุต Type = "Radio" />> จะเหมือนกับฟังก์ชั่นของปุ่ม Radio Selectable เมื่อ multiple = "หลาย" สามารถเลือกได้หลายฟังก์ชั่นจะเทียบเท่ากับช่องทำเครื่องหมาย แต่พื้นที่ที่ครอบครองนั้นเล็กกว่าช่องทำเครื่องหมายมาก

คุณสมบัติทั่วไปของเมนูแบบเลื่อนลง:

①. ดึงเมนูลงเพื่อรับค่าที่เลือกเดียว

คัดลอกรหัสดังต่อไปนี้: <ภาษาสคริปต์ = "JavaScript">

ฟังก์ชั่นตรวจสอบ () {

var oform = document.forms ["myform1"];

var oselectbox = Oform.constellation;

var ichoice = oselectbox.selectedIndex; // รับรายการที่เลือก

การแจ้งเตือน ("คุณเลือก" + oselectbox.options [ichoice] .Text);

-

</script>

<form method = "post" name = "myform1">

<label for = "Constellation"> zodiac sign: </lable>

<p>

<select id = "Constellation" name = "Constellation">

<ตัวเลือกค่า = "ARIES" เลือก = "เลือก"> ARIES </POTION>

<ตัวเลือกค่า = "ราศีพฤษภ"> ราศีพฤษภ </portion>

<ตัวเลือกค่า = "ราศีเมถุน"> ราศีเมถุน </portion>

<ตัวเลือกค่า = "มะเร็ง"> มะเร็ง </portion>

<ตัวเลือกค่า = "Leo"> Lion </potion>

<ตัวเลือกค่า = "Virgo"> Virgo </potion>

<ตัวเลือกค่า = "Libra"> Libra </potion>

<ตัวเลือกค่า = "Scorpio"> Scorpio </potion>

<ตัวเลือกค่า = "Sagittarius"> Snorker </pontion>

<ตัวเลือกค่า = "ราศีมังกร"> ราศีมังกร </portion>

<ตัวเลือกค่า = "Aquarius"> Aquarius </pontion>

<ตัวเลือกค่า = "ราศีมีน"> ราศีมีน </potion>

</เลือก>

</p>

<อินพุต type = "ปุ่ม" 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); // กดลงในอาร์เรย์

การแจ้งเตือน ("คุณเลือก:" + achoices.join ()); // ผลลัพธ์ผลลัพธ์

-

</script>

<form method = "post" name = "myform1">

<label for = "Constellation"> zodiac sign: </lable>

<p>

<select id = "Constellation" name = "Constellation" multiple = "multiple" style = "ความสูง: 180px;">

<ตัวเลือกค่า = "ARIES"> ARIES </POTION>

<ตัวเลือกค่า = "ราศีพฤษภ"> ราศีพฤษภ </portion>

<ตัวเลือกค่า = "ราศีเมถุน"> ราศีเมถุน </portion>

<ตัวเลือกค่า = "มะเร็ง"> มะเร็ง </portion>

<ตัวเลือกค่า = "Leo"> Lion </potion>

<ตัวเลือกค่า = "Virgo"> Virgo </potion>

<ตัวเลือกค่า = "Libra"> Libra </potion>

<ตัวเลือกค่า = "Scorpio"> Scorpio </potion>

<ตัวเลือกค่า = "Sagittarius"> Snorker </pontion>

<ตัวเลือกค่า = "ราศีมังกร"> ราศีมังกร </portion>

<ตัวเลือกค่า = "Aquarius"> Aquarius </pontion>

<ตัวเลือกค่า = "ราศีมีน"> ราศีมีน </potion>

</เลือก>

</p>

<อินพุต type = "ปุ่ม" onclick = "checkMultiple ()" value = "ตัวเลือกมุมมอง" />>>>>>>

</form>

③. ค่าทั่วไป (สิ่งที่ดึงตัวเลือกเดียวและหลายตัวเลือก)

คัดลอกรหัสดังต่อไปนี้: <ภาษาสคริปต์ = "JavaScript">

ฟังก์ชั่น getSelectValue (กล่อง) {

var oform = document.forms ["myform1"];

var oselectbox = Oform.Elements [Box]; // เลือกเมนูแบบเลื่อนลงที่สอดคล้องกันถูกเลือกตามพารามิเตอร์

if (oselectbox.type == "select-one") {// ตัดสินว่ามันเป็นตัวเลือกเดียวหรือแบบปรนัย

var ichoice = oselectbox.selectedIndex; // รับรายการที่เลือก

การแจ้งเตือน ("เลือกเดี่ยวคุณเลือก" + 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); // กดลงในอาร์เรย์

การแจ้งเตือน ("ตัวเลือกหลายอย่างคุณเลือก:" + achoices.join ()); // ผลลัพธ์ผลลัพธ์

-

-

</script>

<form method = "post" name = "myform1">

Constellation:

<p>

<select id = "Constellation1" name = "Constellation1">

<ตัวเลือกค่า = "ARIES" เลือก = "เลือก"> ARIES </POTION>

<ตัวเลือกค่า = "ราศีพฤษภ"> ราศีพฤษภ </portion>

<ตัวเลือกค่า = "ราศีเมถุน"> ราศีเมถุน </portion>

<ตัวเลือกค่า = "มะเร็ง"> มะเร็ง </portion>

<ตัวเลือกค่า = "Leo"> Lion </potion>

<ตัวเลือกค่า = "Virgo"> Virgo </potion>

<ตัวเลือกค่า = "Libra"> Libra </potion>

<ตัวเลือกค่า = "Scorpio"> Scorpio </potion>

<ตัวเลือกค่า = "Sagittarius"> Snorker </pontion>

<ตัวเลือกค่า = "ราศีมังกร"> ราศีมังกร </portion>

<ตัวเลือกค่า = "Aquarius"> Aquarius </pontion>

<ตัวเลือกค่า = "ราศีมีน"> ราศีมีน </potion>

</เลือก>

<อินพุต type = "ปุ่ม" onclick = "getSelectValue ('Constellation1')" value = "ตัวเลือกมุมมอง" />

</p>

<p>

<select id = "Constellation2" name = "Constellation2" multiple = "multiple" style = "ความสูง: 120px;">

<ตัวเลือกค่า = "ARIES"> ARIES </POTION>

<ตัวเลือกค่า = "ราศีพฤษภ"> ราศีพฤษภ </portion>

<ตัวเลือกค่า = "ราศีเมถุน"> ราศีเมถุน </portion>

<ตัวเลือกค่า = "มะเร็ง"> มะเร็ง </portion>

<ตัวเลือกค่า = "Leo"> Lion </potion>

<ตัวเลือกค่า = "Virgo"> Virgo </potion>

<ตัวเลือกค่า = "Libra"> Libra </potion>

<ตัวเลือกค่า = "Scorpio"> Scorpio </potion>

<ตัวเลือกค่า = "Sagittarius"> Snorker </pontion>

<ตัวเลือกค่า = "ราศีมังกร"> ราศีมังกร </portion>

<ตัวเลือกค่า = "Aquarius"> Aquarius </pontion>

<ตัวเลือกค่า = "ราศีมีน"> ราศีมีน </potion>

</เลือก>

<อินพุต type = "ปุ่ม" onclick = "getSelectValue ('Constellation2')" value = "ตัวเลือกมุมมอง" />

</p>

</form>

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน