Artikel ini menjelaskan cara mengatur tombol radio, kotak centang, dan menu drop-down menggunakan DOM oleh JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
1. Atur tombol radio
Tombol radio ada dalam bentuk <input type = "Radio" />. Ini adalah satu set objek untuk dipilih pengguna, tetapi hanya satu yang dapat dipilih sekaligus. Masing -masing memiliki atribut yang diperiksa, dan ketika seseorang memilihnya sebagai Ture, yang lain menjadi salah.
Mari kita posting contoh terlebih dahulu:
Salin kode sebagai berikut: <script type = "text/javascript">
fungsi getChoice () {
var oform = document.forms ["uForm1"];
var achoices = oform.camera;
untuk (i = 0; i <achoices.length; i ++) // Transfer seluruh tabel opsi tunggal
if (achoices [i] .Checked) // keluar jika item yang dipilih ditemukan
merusak;
peringatan ("merek kamera adalah:" + achoices [i] .value);
}
fungsi setChoice (inum) {
var oform = document.forms ["uForm1"];
oform.camera [inum] .Checked = true;
}
</script>
<Form Method = "Posting" name = "uForm1" action = "addinfo.aspx">
Merek kamera:
<p>
<input type = "Radio" name = "kamera" id = "canon" value = "canon">
<Label untuk = "Canon"> Canon </label>
</p>
<p>
<input type = "Radio" name = "kamera" id = "nikon" value = "nikon">
<Label untuk = "Nikon"> Nikon </label>
</p>
<p>
<input type = "Radio" name = "kamera" id = "sony" value = "sony" checked>
<Label untuk = "Sony"> Sony </LABEL>
</p>
<p>
<input type = "Radio" name = "kamera" id = "olympus" value = "olympus">
<Label untuk = "Olympus"> Olympus </label>
</p>
<p>
<input type = "Radio" name = "kamera" id = "samsung" value = "samsung">
<label untuk = "samsung"> samsung </label>
</p>
<p>
<input type = "Radio" name = "kamera" id = "Pentax" value = "Pentax">
<Label untuk = "Pentax"> Pentax </label>
</p>
<p>
<input type = "Radio" name = "camera" id = "nilai lainnya" = "orang lain">
<Label untuk = "Lainnya"> Lainnya </LABEL>
</p>
<p>
<input type = "kirim" name = "btnsubmit" id = "btnsubmit" value = "kirim">
</p>
<p>
<input type = "Tombol" value = "Deteksi objek yang dipilih" onClick = "getChoice ();">
<input type = "Tombol" value = "Set ke Canon" OnClick = "SetChoice (0);">
</p>
</form>
Tombol radio ada dalam bentuk <input type = "Radio" />. Ini adalah satu set objek untuk dipilih pengguna, tetapi hanya satu yang dapat dipilih sekaligus. Masing -masing memiliki atribut yang diperiksa, dan ketika seseorang memilihnya sebagai Ture, yang lain menjadi salah.
Dari kode di atas, dapat dilihat bahwa ID dan nama berbeda, dan namanya sama dalam satu set tombol radio, dan hanya satu yang dipilih. ID terikat pada <LABEL> atau opsi lain.
Di antara kode: Kode untuk memeriksa objek yang dipilih adalah (ketika nilai chcked dari item tertentu adalah Ture, traversal berakhir)
Salinan kode adalah sebagai berikut: var oform = document.forms ["uForm1"];
var achoices = oform.camera;
untuk (i = 0; i <achoices.length; i ++) // Transfer seluruh tabel opsi tunggal
if (achoices [i] .Checked) // keluar jika item yang dipilih ditemukan
merusak;
peringatan ("merek kamera adalah:" + achoices [i] .value);
2. Atur beberapa kotak pilihan
Tidak seperti tombol radio, kotak centang <input type = "kotak centang" /> dapat dipilih secara bersamaan untuk diproses. Kotak centang sebelum setiap email di kotak surat adalah penggunaan yang khas.
Salin kode sebagai berikut: <script type = "text/javascript">
kotak centang fungsi () {
var str = document.getElementsbyname ("hobi");
var objarray = str.length;
var chestr = "";
untuk (j = 0; j <objaRray; j ++) {
if (str [j] .Checked == true) {
chester + = str [j] .value + ",";
}
}
if (chestr == "") {
Peringatan ("Silakan pilih hobi terlebih dahulu ~!");
} kalau tidak {
Peringatan ("Pilih Pertama Anda:" + Chestr);
}
}
Function Changeboxes (Action) {
var oform = document.forms ["myForm1"];
var ocheckbox = oform.hobby;
untuk (var i = 0; i <ocheckbox.length; i ++) // Transfer setiap opsi
if (action <0) // seleksi terbalik
ocheckbox [i] .Checked =! Ocheckbox [i] .Checked;
else // Jika tindakannya 1, pilih semua, dan jika 0, pilih semua
ocheckbox [i] .Checked = action;
}
</script>
<Form Method = "POST" NAME = "MYFORM1" ACTION = "ADDINFO.ASPX">
Hal -hal yang ingin Anda lakukan:
<p>
<input type = "centang kotak" name = "hobby" id = "ball" value = "bola">
<label untuk = "bola"> bermain basket </label>
</p>
<p>
<input type = "centang kotak" name = "hobby" id = "tv" value = "tv">
<Label untuk = "TV"> Tonton TV </LABEL>
</p>
<p>
<input type = "centang kotak" name = "hobby" id = "net" value = "net">
<label untuk = "net"> di internet </label>
</p>
<p>
<input type = "centang kotak" name = "hobby" id = "book" value = "book">
<Label untuk = "Buku"> Membaca </LABEL>
</p>
<p>
<input type = "centang kotak" name = "hobby" id = "trip" value = "trip">
<Label untuk = "Trip"> Travel </LABEL>
</p>
<p>
<input type = "centang kotak" name = "hobby" id = "music" value = "musik">
<Label untuk = "Musik"> Musik </label>
</p>
<p>
<input type = "centang kotak" name = "hobby" id = "nilai lainnya" = "orang lain">
<Label untuk = "Lainnya"> Lainnya </LABEL>
</p>
<p>
<input type = "Tombol" value = "pilih semua" onClick = "changeboxes (1);" />
<input type = "tombol" value = "Tidak ada pilihan sama sekali" onclick = "Changeboxes (0);" />
<input type = "tombol" value = "anti-select" onClick = "changeboxes (-1);" />
<input type = "tombol" value = "kirim" ontClick = "centang kotak ()" />
</p>
</form>
Prinsip kotak centang ditentukan menggunakan nilai boolean atribut yang diperiksa. Pilih semua dan seleksi yang tidak lengkap dapat melewati parameter dalam bentuk 0 dan 1.
3. Menu pull-down
Menu drop-down <COCTER> adalah elemen formulir yang umum digunakan. Ketika pull-down dapat dipilih, fungsi tombol radio <input type = "Radio" /> sama dengan fungsi tombol yang dapat dipilih radio. Ketika beberapa = "Multiple" dapat dipilih, fungsi ini setara dengan kotak centang, tetapi area yang ditempati jauh lebih kecil dari kotak centang.
Sifat umum menu drop-down:
| milik | menjelaskan |
| panjang | Menunjukkan jumlah opsi <pection> |
| terpilih | Nilai Boolean Menunjukkan apakah <pection> dipilih |
| SelectedIndex | Nomor seri opsi yang dipilih adalah -1 jika tidak ada opsi yang dipilih. Untuk menu drop-down multi-select, kembali ke yang pertama dipilih Nomor urutan dimulai dari 0 |
| teks | Teks Opsi |
| nilai | Nilai opsi |
| jenis | Jenis menu tarik-turun, pilihan tunggal mengembalikan pilihan-satu, pengembalian pilihan ganda-pilihan-multiple |
| opsi | Dapatkan serangkaian opsi, misalnya: oselectbox.Options [2], menunjukkan item ketiga OselectBox pada menu drop-down |
①. Tarik menu untuk mendapatkan nilai pilihan tunggal
Salin kode sebagai berikut: <bahasa skrip = "javascript">
function checksingle () {
var oform = document.forms ["myForm1"];
var oselectbox = oform.constellation;
var ichoice = oselectbox.selectectedIndex; // Dapatkan item yang dipilih
alert ("Anda memilih" + oselectbox.Options [ichoice] .text);
}
</script>
<Form Method = "POST" NAME = "MYFORM1">
<label untuk = "Constellation"> tanda zodiak: </label>
<p>
<Pilih ID = "Constellation" Name = "Constellation">
<Opsi value = "Aries" Dipilih = "Dipilih"> Aries </ties>
<Opsi value = "taurus"> taurus </pection>
<Opsi Value = "Gemini"> Gemini </pection>
<Opsi value = "Cancer"> Cancer </option>
<Option value = "leo"> singa </tipt>
<nilai opsi = "virgo"> virgo </pection>
<Option value = "libra"> Libra </pection>
<Option value = "scorpio"> Scorpio </pection>
<Option value = "sagitarius"> snorker </pection>
<Option value = "Capricorn"> Capricorn </pection>
<Option value = "Aquarius"> Aquarius </pection>
<Opsi value = "pisces"> pisces </option>
</pilih>
</p>
<input type = "tombol" ontClick = "checksingle ()" value = "view options" />
</form>
②. Saat menu drop-down multi-select, ambil nilainya
Salin kode sebagai berikut: <script type = "text/javascript">
function checkMultiple () {
var oform = document.forms ["myForm1"];
var oselectbox = oform.constellation;
var achoices = array baru ();
// Bepergian ke seluruh menu drop-down
untuk (var i = 0; i <oselectbox.options.length; i ++)
if (oselectbox.Options [i] .pilih) // jika dipilih
achoices.push (oselectbox.options [i] .text); // tekan ke array
alert ("Anda memilih:" + achoices.join ()); // hasil output
}
</script>
<Form Method = "POST" NAME = "MYFORM1">
<label untuk = "Constellation"> tanda zodiak: </label>
<p>
<Pilih id = "Constellation" Name = "Constellation" Multiple = "Multiple" Style = "Tinggi: 180px;">
<Option value = "Aries"> Aries </tion>
<Opsi value = "taurus"> taurus </pection>
<Opsi Value = "Gemini"> Gemini </pection>
<Opsi value = "Cancer"> Cancer </option>
<Option value = "leo"> singa </tipt>
<nilai opsi = "virgo"> virgo </pection>
<Option value = "libra"> Libra </pection>
<Option value = "scorpio"> Scorpio </pection>
<Option value = "sagitarius"> snorker </pection>
<Option value = "Capricorn"> Capricorn </pection>
<Option value = "Aquarius"> Aquarius </pection>
<Opsi value = "pisces"> pisces </option>
</pilih>
</p>
<input type = "tombol" ontClick = "checkMultiple ()" value = "view options" />
</form>
③. Nilai umum (sesuatu yang menarik ke bawah satu pilihan dan beberapa pilihan)
Salin kode sebagai berikut: <bahasa skrip = "javascript">
function getSelectValue (box) {
var oform = document.forms ["myForm1"];
var oselectbox = oform.elements [box]; // Menu drop-down pilihan yang sesuai dipilih sesuai dengan parameter
if (oselectbox.type == "select-one") {// menilai apakah itu pilihan tunggal atau ganda
var ichoice = oselectbox.selectectedIndex; // Dapatkan item yang dipilih
alert ("Select tunggal, Anda memilih" + oselectbox.Options [ichoice] .text);
} kalau tidak {
var achoices = array baru ();
// Bepergian ke seluruh menu drop-down
untuk (var i = 0; i <oselectbox.options.length; i ++)
if (oselectbox.Options [i] .pilih) // jika dipilih
achoices.push (oselectbox.options [i] .text); // tekan ke array
peringatan ("Pilihan ganda, Anda memilih:" + achoices.join ()); // hasil output
}
}
</script>
<Form Method = "POST" NAME = "MYFORM1">
konstelasi:
<p>
<Pilih id = "constellation1" name = "constellation1">
<Opsi value = "Aries" Dipilih = "Dipilih"> Aries </ties>
<Opsi value = "taurus"> taurus </pection>
<Opsi Value = "Gemini"> Gemini </pection>
<Opsi value = "Cancer"> Cancer </option>
<Option value = "leo"> singa </tipt>
<nilai opsi = "virgo"> virgo </pection>
<Option value = "libra"> Libra </pection>
<Option value = "scorpio"> Scorpio </pection>
<Option value = "sagitarius"> snorker </pection>
<Option value = "Capricorn"> Capricorn </pection>
<Option value = "Aquarius"> Aquarius </pection>
<Opsi value = "pisces"> pisces </option>
</pilih>
<input type = "tombol" ontClick = "getSelectValue ('constellation1')" value = "view options" />
</p>
<p>
<Pilih id = "constellation2" name = "constellation2" Multiple = "Multiple" style = "Tinggi: 120px;">
<Option value = "Aries"> Aries </tion>
<Opsi value = "taurus"> taurus </pection>
<Opsi Value = "Gemini"> Gemini </pection>
<Opsi value = "Cancer"> Cancer </option>
<Option value = "leo"> singa </tipt>
<nilai opsi = "virgo"> virgo </pection>
<Option value = "libra"> Libra </pection>
<Option value = "scorpio"> Scorpio </pection>
<Option value = "sagitarius"> snorker </pection>
<Option value = "Capricorn"> Capricorn </pection>
<Option value = "Aquarius"> Aquarius </pection>
<Opsi value = "pisces"> pisces </option>
</pilih>
<input type = "tombol" ontClick = "getSelectValue ('constellation2')" value = "view options" />
</p>
</form>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.