Dalam artikel sebelumnya, saya memperkenalkan Anda pengetahuan yang relevan tentang contoh penjelasan formulir operasi JS (Bagian 2). Artikel ini akan memperkenalkan Anda pada contoh penjelasan formulir operasi JavaScript (Bagian 2). Detail spesifiknya adalah sebagai berikut:
1. Bidang Teks
<input type = "text" />
-----------------------------------------------------------------------------------------------------------------------------
Mengoperasikan nilai bidang teks
nilai set properti atau mendapatkan nilai
-----------------------------------------------------------------------------------------------------------------------------
2. Tombol Radio dan Multi-Select
<input type = "radio" /> <input type = "centang kotak" />
-----------------------------------------------------------------------------------------------------------------------------
memeriksa kembali atau mengatur status pilihan tunggal yang dipilih
Benar Dipilih Salah Tidak Dipilih
Atribut nilai memperoleh nilai yang dipilih dan harus terlebih dahulu menentukan keadaan yang dipilih.
-----------------------------------------------------------------------------------------------------------------------------
Contoh: Pilih Semua/Tidak Pilih Semua/Reverse
1.png
1. Struktur Dom
<body> <form name = "myForm" action = "#" Method = "POST" ID = "Form1"> <script type = "Text /JavaScript"> untuk (var i = 0; i <20; i ++) {document.write ("<input type = 'centang' name = 'nums' />" <"i+1)" <br> ") (radio") (radio ") (radio") (LAYAMAN ") (LAYAMAN") (i+1) ") (i+1)") <br> ") (i+1)") <pecums ') (i+1) ") (i+1)") (i+1) ") (i+1)") (i+1) ")" name = 'Radios'> Pilih Semua "); Document.Write (" <Input Type = 'Radio' Name = 'Radios'> Pilih Semua "); Document.Write (" <Input Type = 'Radio' Name = 'Radio'> Pilih Semua "); Dokumen.Write (" <Input Tipe = 'Radio' Name = 'Radios'> Pilih All "); name = 'Radios'> Anti-Select "); </script> </form> </body>2.Script Script
2.1 Menggunakan Metode Panggilan Fungsi
<type script = "text/javaScript"> window.onload = function () {var nums = document.geteLementsbyname ("nums"); var radios = document.geteLementsbyname ("radio"); fun (num, i, radios); fun fun (a, b, c) {c [b] .onclick = radios); function fun (a, b, c) {c [b]. i = 0; i <a.length; i ++) {a [i] .Checked = true;}} lain jika (b == 1) {for (var i = 0; i <a.length; i ++) {a [i] .Checked = false;}} lain jika (b == 2) {for (var] i = 0; i <a.length; i ++) {if (a [i] .Checked) {a [i] .Checked = false;} else {a [i] .Checked = true;}}}}} </skrip>2.2 Menggunakan metode membuat fungsi anonim dalam penutupan
<script type = "text/javascript"> window.onload = function () {var nums = document.geteLementsbyname ("nums"); var radios = document.geteLementsbyname ("radio"); untuk (var i = 0; i <radios.length; i ++) {(function (a) {radios [a] .onClick = function () {if (a == 0) {for (var i = 0; i <nums.length; i ++) {nums [i] .Checked = true;}}} lain (a ==) {i] i = 0; i <nums.length; i ++) {nums [i] .Checked = false;}} lain jika (a == 2) {for (var i = 0; i <nums.length; i ++) {if (i] .kecked) {nums. }) (i);}} </script>3. Tarik Kotak Down
<Form name = "myForm"> <pilih name = "sels"> <pection> Peking University </tiption> <pection> universitas chang'an </tiption> <pection> universitas nanjing </pection> </dectt> </form>
-----------------------------------------------------------------------------------------------------------------------------
set yang dipilih atau kembali ke keadaan yang dipilih dari kotak drop-down
Benar Dipilih Salah Tidak Dipilih
SelectedIndex Set atau kembalikan nomor indeks yang dipilih di kotak drop-down
-----------------------------------------------------------------------------------------------------------------------------
Contoh1: Pilih Universitas Chang'an
<script> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (itu juga mungkin) sels [1] .dilih = true; </script>
atau
<script> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (itu juga mungkin) sels.selectectedIndex = 1; </script>
Contoh2: Harga Unit * Kuantitas = Total Harga
1.png
1. Struktur Dom
<body> <form name = "myForm" Action = "#" Method = "Post" id = "Form1"> Harga unit: <input type = "text" name = "price" value = "200"> <pilih name = "count"> kuantitas <pect> 1 </pection> <option> 2 </option> <option> 3 </sount "</Pilih Total Harga: </Option> </Option =" "TOPS ="
2.Script Script
<type skrip = "Text/JavaScript"> window.onload = function () {var price = document.myform.price; var count = document.myform.count; var total = document.myform.total; count.onchange = function () {total.value = parseInt (price.value)*(count.selSelex }} </script>4. Area teks
<TextArea name = "info" baris = "7" cols = "60"> </pextarea>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
nilai mengembalikan atau menetapkan nilai area teks
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Contoh: Deteksi secara dinamis panjang karakter yang dimasukkan di area teks
1.png
1. Struktur Dom:
<body> <v id = "content"> Total 20 karakter dapat dimasukkan, 0 telah dimasukkan, dan 20 dapat dimasukkan </div> <form name = "myForm" Action = "#" Method = "POST" ID = "Form1"> <TexTarea name = "info" cols = "60" baris = "7"> </textarea> </formulir> cols = "60" baris = "7"> </textarea> </Form> Cols = "60" "7"> </TextArea> </Form> COLS = "60" 7 "
2.Script Script:
<type skrip = "Text/JavaScript"> window.onload = function () {var content = document.getElementById ("content"); var info = document.myform.info; info.onkeyup = info.onkeydown = function () {var str = info.value; var length = strs. strs = 20; Karakter "+strs+" telah dimasukkan, dan "+panjang+" juga dapat dimasukkan, dan "+(strs-length)+" s "juga dapat dimasukkan;} else {info.value = str.substring (0, strs);}} // deteksi cina dan function function Inggris (str) {var num = 0; i = 0; i <str.length; i ++) {if (str.charCodeat (i)> = 0 && str.charcodeat (i) <= 255) {// bahasa Inggris num ++;} else {// num+cina = 2;}} return num;}} </skrip5. Verifikasi bentuk
Acara OnSubmit dipecat saat formulir diserahkan
-----------------------------------------------------------------------------------------------------------------------------
<Form name = "myForm" Action = "www.baidu.com" Method = "POST" ONSUBMIT = "Return check (this)"> </form> return false; // Blokir perilaku default formulir
-----------------------------------------------------------------------------------------------------------------------------
6. Metode Kirim
Metode ini digunakan untuk mengimplementasikan pengiriman otomatis
Acara Onsubmit hanya dapat digunakan untuk mengirimkan secara manual
Di atas adalah contoh penjelasan dari formulir operasi JavaScript yang diperkenalkan oleh editor (Bagian 2). Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!