เมื่อทำงานในโครงการคุณจะได้รับตัวเลือกเด็กแบบไดนามิกตามตัวเลือกหลักและแสดงรายการช่องทำเครื่องหมายหลายช่อง เมื่อส่งให้รวมตัวเลือกตัวที่เลือกไว้ในตัวละครตัวเดียวและส่งไปยังพื้นหลัง
บทนี้จะบอกวิธีการดำเนินการนี้ผ่านการควบคุม JS:
1: ออกแบบหมวดหมู่หลักเป็นวิทยุเพิ่มเหตุการณ์ onclick ให้กับแต่ละวิทยุและหมวดหมู่เริ่มต้น 1 คือสถานะการเลือก
<อินพุต type = "ช่องทำเครื่องหมาย" name = "selectall" id = "selectall" onclick = "selectall ();" checked = "ตรวจสอบ"/> เลือกทั้งหมด <br> <input type = "Radio" name = "lb" id = "lb" value = "1" onClick = "getZlb (1);" checked = "ตรวจสอบ"/> หมวดหมู่ 1 <อินพุต type = "วิทยุ" ชื่อ = "lb" id = "lb" value = "2" onClick = "getZlb (2);"/> หมวดหมู่ 2 <อินพุตประเภท = "radio" name = "lb" id = "lb"
2: เมื่อหน้ากำลังโหลดเริ่มต้นหมวดหมู่ย่อยควรแสดงตามหมวดหมู่หลักที่เลือก เมื่อคลิกปุ่มควรได้รับหมวดหมู่ย่อยดังนั้นจึงถูกเขียนเป็นวิธีเดียวกันและเรียกว่าหลังจากการโหลดหน้าเว็บเสร็จสมบูรณ์
window.onload = getzlb ();
3: รับเมธอด JS ของหมวดหมู่ย่อยรับข้อมูลพื้นหลังแบบไดนามิกผ่านวิธี AJAX
/** * รับหมวดหมู่ย่อยและแสดงหลังจากโหลดหน้าเสร็จแล้ว */ฟังก์ชั่น getzlb () {// รับ var obj = document.getElementSbyName ("lb"); สำหรับ (var i = 0; i <obj.length; i ++) {ถ้า (obj [i]. ตรวจสอบ) {getzlbnews (obj [i] .value); }}} ฟังก์ชั่น getzlbNews () {(รับข้อมูลประเภทแผนที่ผ่าน ajax; ส่งคืนข้อมูลในผลลัพธ์รูปแบบ JSON) var json = eval ("("+ผลลัพธ์+")"); // แปลงเป็นวัตถุ JSON // รับพื้นที่ที่จะแสดงโดย parent var ชนิดย่อย = document.getElementById ('XSQY'); // วางภูมิภาคย่อยที่ว่างเปล่าเพื่อป้องกัน parent.innerhtml = ''; var p = 0; var span = ""; // ตรวจสอบ document.getElementById ("Selectall") ตรวจสอบ = true; สำหรับ (var i ใน json) {p ++; span = "<span style =/" จอแสดงผล: inline-block; ความกว้าง: 75px;/"> <อินพุตประเภท =/" ช่องทำเครื่องหมาย/"ตรวจสอบ =/" ตรวจสอบ/"onclick =/" checkselectall ();/"name =" zlb/"value =/" "i+"/">" json [i]+"</span>"; // เมื่อมีกล่องตรวจสอบย่อยมากกว่า 11 กล่องดังนั้น Newline ถ้า (p%11 == 0) {span = span+"<br>"; } // เพิ่มกล่องตรวจสอบย่อยทีละรายการไปยัง parent.innerhtml = parent.innerhtml+span; -4: ตรรกะพื้นหลัง
/ ** * ส่งคืนแผนที่รูปแบบแผนที่ <รหัสชื่อ> * @return */ สตริงสาธารณะ getzlb () {แผนที่ <จำนวนเต็ม, สตริง> zlb = service.getzlb (); // แปลงแผนที่เป็นรูปแบบ JSON JSON A = JSonserializer.tojson (ZLB); return a.tostring (); -5: JS ควบคุมตรรกะว่าจะเลือกทั้งหมดหรือไม่และเลือกทั้งหมดและวิธีการรวมรหัสที่เลือกเมื่อส่ง
/ ** * เลือกทั้งหมดหรือยกเลิกทั้งหมด */ ฟังก์ชั่น selectalldz () {ช่องทำเครื่องหมาย var = document.getElementByName ("zlb"); สำหรับ (var i = 0; i <copboxs.length; i ++) {// ควบคุมไม่ว่าจะเลือกหมวดหมู่ย่อยขึ้นอยู่กับว่าปุ่มที่เลือกถูกเลือกทั้งหมดเพื่อควบคุมช่องทำเครื่องหมายหรือไม่ }}/ ** * พิจารณาว่าหมวดหมู่ย่อยถูกเลือกทั้งหมดหรือไม่หากเลือกปุ่มทั้งหมดที่เลือกมิฉะนั้นปุ่มทั้งหมดที่เลือกจะไม่ถูกเลือก */ ฟังก์ชั่น checksElectall () {ช่องทำเครื่องหมาย var = document.getElementsByName ("zlb"); var isselectall = true; สำหรับ (var i = 0; i <copboxs.length; i ++) {ถ้า (ช่องทำเครื่องหมาย [i]. checked == false) {isselectall = false; }} if (issElectall == false) {document.getElementById ("selectall") ตรวจสอบ = false; } else {document.getElementById ("selectall") ตรวจสอบ = true; }}/*** splice ids ที่เลือกและแยกออกด้วย commas*/function getAllidstr (CheckName) {var select = document.getElementSbyName (CheckName); var idstr = new Array (); สำหรับ (var i = 0; i <select.length; i ++) {ถ้า (เลือก [i] .checked == true) {idstr = idstr.concat (เลือก [i] .value); }} return idstr.join (',');}6: เมื่อทำการดำเนินการต่อไปหากคุณส่งให้เปลี่ยนทั้งหมดให้เลือกเป็นอักขระตัวหนึ่งและกำหนดให้กับกล่องข้อความที่ซ่อนอยู่เพื่อส่งไปยังพื้นหลัง
// เรียกวิธีการประกบ ID และส่งชื่อขององค์ประกอบที่จะดำเนินการผ่าน var allzlb = getAllidstr ('zlb'); // สร้างกล่องข้อความที่ซ่อนอยู่กำหนด spliced ให้กับมันและใช้เพื่อรับ document.getElementById ('allzlbstr')ข้างต้นเป็นเพียงความเห็นส่วนตัว หากคุณมีวิธีแก้ปัญหาที่ดีกว่าโปรดแจ้งให้เราทราบ
ข้างต้นเป็นเนื้อหาเต็มรูปแบบของวิธีการใช้งานของการรับตัวเลือก sub-complex แบบไดนามิกและการออกแบบการเลือกและการส่งทั้งหมดที่นำมาให้คุณ ฉันหวังว่าทุกคนจะสนับสนุน wulin.com เพิ่มเติม ~