js untuk menggunakan DOM untuk menetapkan butang radio, kotak semak dan kemahiran menus_javascript lungsur turun

Contoh dalam artikel ini menerangkan cara js menggunakan DOM untuk menetapkan butang radio, kotak semak dan menu lungsur. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

1. Tetapkan butang radio

Butang radio dalam borang ialah Ia adalah satu set objek untuk dipilih oleh pengguna, tetapi hanya satu boleh dipilih pada satu masa. Setiap satu mempunyai atribut yang ditandai Apabila satu pilihan adalah benar, yang lain menjadi palsu.

Siarkan contoh dahulu:

Salin kod Kod adalah seperti berikut: Fungsi getChoice() { var oForm = document.forms["uForm1"]; var aChoices = oForm.camera; untuk (i = 0; i Jika (aChoices[i].ditandai) //Keluar jika item yang dipilih ditemui rehat; alert("Jenama kamera ialah: " aChoices[i].value); }

fungsi setChoice(iNum) { var oForm = document.forms["uForm1"]; oForm.camera[iNum].ditanda = benar; } Jenama kamera: Canon

Nikon

Sony

Olympus

Samsung

Pentax

others

Butang radio dalam borang ialah Ia adalah satu set objek untuk dipilih oleh pengguna, tetapi hanya satu boleh dipilih pada satu masa. Setiap satu mempunyai atribut yang ditandai Apabila satu pilihan adalah benar, yang lain menjadi palsu. Seperti yang dapat dilihat daripada kod di atas, id dan nama adalah berbeza Nama mereka dalam sekumpulan butang radio adalah sama, dan hanya satu yang dipilih. Id terikat pada

Dalam kod: kod untuk menyemak objek yang dipilih ialah (apabila nilai yang disemak bagi item tertentu adalah benar, traversal tamat)

Salin kod Kod adalah seperti berikut: var oForm = document.forms["uForm1"]; var aChoices = oForm.camera; untuk (i = 0; i Jika (aChoices[i].ditandai) //Keluar jika item yang dipilih ditemui rehat; alert("Jenama kamera ialah: " aChoices[i].value);

2. Setkan kotak berbilang pilihan

Tidak seperti butang radio, kotak semak boleh memilih berbilang pilihan untuk diproses pada masa yang sama Kotak semak sebelum setiap e-mel dalam peti mel adalah kegunaan biasa Salin kod Kod adalah seperti berikut: kotak semak fungsi() { var str = document.getElementsByName("hobi"); var objarray = str.length; var chestr = "";

untuk (j = 0; j Jika (str[j].ditanda == benar) { Chestr = str[j].nilai ","; } } jika (chestr == "") { alert("Sila pilih hobi dahulu~!"); } lain { alert("Pilihan pertama anda ialah:" chestr); } }

kotak tukar fungsi (tindakan) { var oForm = document.forms["myForm1"]; var oCheckBox = oForm.hobby; untuk (var i = 0; i Jika (tindakan oCheckBox[i].checked = !oCheckBox[i].checked; lain //Jika tindakan ialah 1, semua akan dipilih, jika 0, tiada satu pun akan dipilih oCheckBox[i].checked = tindakan; } Perkara yang anda suka lakukan: Main bola

tonton TV

Internet

Membaca

Perjalanan

Muzik

others

Prinsip kotak semak ditentukan dengan menggunakan nilai Boolean atribut yang ditandakan Parameter boleh dihantar dalam bentuk 0 dan 1 untuk memilih semua dan bukan semua.

3. Menu lungsur turun

Menu lungsur ialah elemen bentuk yang biasa digunakan. Apabila menu lungsur turun adalah untuk pemilihan tunggal, ia mempunyai fungsi yang sama seperti butang radio Apabila menu drop-down adalah untuk berbilang pilihan, apabila berbilang="multiple", fungsinya adalah bersamaan dengan kotak semak, tetapi ia menduduki kawasan yang lebih kecil daripada kotak semak.

Atribut biasa menu lungsur:

<table border="1" cellspacing="0" style="box-sizing: border-box; border-bottom: silver 1px solid; border-left: silver 1px solid; text-transform: none; background-color: rgb(255,255,255); text-indent: 0px; width: 619px; border-collapse: collapse; font: 13px/20px Verdana, Arial, Helvetica, sans-serif; white-space: normal; letter-spacing: normal; height: 219px; color: rgb(75,75,75); border-top: silver 1px solid; border-right: silver 1px solid; word-spacing: 0px; -webkit-text-stroke-width: 0px"> Hartanah Penerangan panjang Menunjukkan bilangan pilihan dipilih Nilai Boolean, menunjukkan sama ada dipilih Indeks Terpilih Nombor siri pilihan yang dipilih, -1 jika tiada pilihan dipilih Untuk menu lungsur turun berbilang pilihan, kembalikan pilihan pertama yang dipilih Nombor siri, dikira dari 0 teks Teks pilihan nilai Nilai pilihan taip Jenis menu lungsur, pilihan tunggal mengembalikan pilih satu, pilihan berbilang mengembalikan pilih-berbilang pilihan Dapatkan tatasusunan pilihan, contohnya: oSelectBox.options[2], yang mewakili item ketiga menu lungsur oSelectBox ① Dapatkan nilai pilihan radio daripada menu lungsur Salin kod Kod adalah seperti berikut: Fungsi checkSingle() { var oForm = document.forms["myForm1"]; var oSelectBox = oForm.constellation; var iChoice = oSelectBox.selectedIndex; //Dapatkan item yang dipilih alert("Anda memilih" oSelectBox.options[iChoice].text); } Constellation: Aries Taurus Gemini Kanser Singa Virgin Libra Scorpio Sagittarius Capricorn botol air Pisces

② Apabila menu lungsur turun berbilang pilih, nilainya ialah

Salin kod Kod adalah seperti berikut: Fungsi checkMultiple() { var oForm = document.forms["myForm1"]; var oSelectBox = oForm.constellation; var aChoices = new Array(); //Lintas keseluruhan menu lungsur turun untuk (var i = 0; i Jika (oSelectBox.options[i].selected) //Jika dipilih aChoices.push(oSelectBox.options[i].text); //Tolak ke dalam tatasusunan alert("Anda memilih:" aChoices.join()); //Hasil keluaran } Constellation: Aries Taurus Gemini Kanser Singa Virgin Libra Scorpio Sagittarius Capricorn botol air Pisces

③ Nilai universal (drop-down pilihan tunggal dan berbilang pilihan)

Salin kod Kod adalah seperti berikut: Fungsi getSelectValue(Kotak) { var oForm = document.forms["myForm1"]; var oSelectBox = oForm.elements[Box]; //Pilih menu lungsur mengikut parameter if (oSelectBox.type == "select-one") { //Tentukan sama ada pilihan tunggal atau berbilang pilihan var iChoice = oSelectBox.selectedIndex; //Dapatkan item yang dipilih alert("Pilihan tunggal, anda pilih" oSelectBox.options[iChoice].text); } lain { var aChoices = new Array(); //Lintas keseluruhan menu lungsur turun untuk (var i = 0; i if (oSelectBox.options[i].selected) //Jika dipilih aChoices.push(oSelectBox.options[i].text); //Tolak ke dalam tatasusunan alert("Pelbagai pilihan, anda pilih:" aChoices.join()); //Hasil keluaran } } Buruj: Aries Taurus Gemini Kanser Singa Virgin Libra Scorpio Sagittarius Capricorn botol air Pisces

Aries Taurus Gemini Kanser Singa Virgin Libra Scorpio Sagittarius Capricorn botol air Pisces

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.