Bagaimana untuk mendapatkan nilai input dalam javascript

Dalam pembangunan bahagian hadapan, untuk memproses data yang dimasukkan oleh pengguna, biasanya perlu mendapatkan nilai input elemen borang. JavaScript menyediakan beberapa kaedah untuk mendapatkan nilai input, mari kita lihat.

1 Dapatkan nilai input kotak teks

Kotak teks ialah salah satu elemen bentuk yang paling biasa apabila mendapatkan nilai inputnya, anda boleh menggunakan atribut nilai. Kita boleh mendapatkan elemen kotak teks melalui kaedah getElementById, dan kemudian menggunakan atribut nilai untuk mendapatkan nilai yang dimasukkan.

Kod sampel:

<input type="text" id="myText">
<script>
    var inputVal = document.getElementById("myText").value;
    console.log(inputVal);
</script>

Dalam kod di atas, kami mula-mula mentakrifkan elemen kotak teks, kemudian menggunakan JavaScript untuk mendapatkan nilai inputnya, dan akhirnya mengeluarkan nilai kepada konsol.

2. Dapatkan nilai input bagi kotak berbilang pilihan

Kotak berbilang pilih biasanya digunakan untuk memilih satu atau lebih pilihan Kita boleh mendapatkan nilai inputnya dengan menggelung kesemuanya pilihan. Mula-mula kita perlu mendapatkan semua pilihan kotak berbilang pilih, kemudian lelaran melalui semua pilihan dan dapatkan status pilihan melalui atribut yang diperiksa.

Kod contoh:

<input type="checkbox" class="checkbox" value="apple">
<input type="checkbox" class="checkbox" value="orange">
<input type="checkbox" class="checkbox" value="banana">
<script>
    var checkboxes = document.getElementsByClassName("checkbox");
    var checkedVal = [];
    for(var i = 0; i < checkboxes.length; i++){
        if(checkboxes[i].checked){
            checkedVal.push(checkboxes[i].value);
        }
    }
    console.log(checkedVal);
</script>

Dalam kod di atas, kami mula-mula mentakrifkan beberapa elemen kotak berbilang pilihan dan mendapatkan semua elemen kotak berbilang pilihan melalui kaedah getElementsByClassName. Kemudian, kami memperoleh status setiap pilihan dengan merentasi dan menyimpan nilai pilihan yang dipilih dalam tatasusunan.

3 Dapatkan nilai input butang radio

Mendapatkan nilai input butang radio adalah serupa dengan kotak berbilang pilihan Ia juga memerlukan melintasi elemen butang radio untuk mendapatkan status pilihan. Tetapi perbezaannya ialah memandangkan butang radio hanya boleh memilih satu pilihan pada satu masa, kita biasanya boleh menggunakan atribut nama untuk mengumpulkan elemen butang radio, yang menjadikannya lebih mudah untuk melintasi semua pilihan.

Kod sampel:

<input type="radio" name="fruit" value="apple">
<input type="radio" name="fruit" value="orange">
<input type="radio" name="fruit" value="banana">
<script>
    var radios = document.getElementsByName("fruit");
    var checkedVal = null;
    for(var i = 0; i < radios.length; i++){
        if(radios[i].checked){
            checkedVal = radios[i].value;
            break;
        }
    }
    console.log(checkedVal);
</script>

Dalam kod di atas, kami mula-mula mentakrifkan beberapa elemen butang radio dan mengumpulkannya mengikut atribut nama. Kemudian, kami mendapat status pemilihan semasa melalui traversal Jika pilihan dipilih, kami menyimpan nilainya dalam pembolehubah checkedVal.

Ringkasan:

Di atas ialah kaedah mendapatkan nilai input elemen borang Kaedah mendapatkan kotak teks, kotak berbilang pilihan dan butang radio adalah berbeza, tetapi ia adalah berbeza semua dengan merentasi elemen dan kemudian melepasi Atribut khusus untuk mendapatkan nilai input. Tanpa mengira kaedah, mendapatkan nilai input elemen borang adalah langkah yang perlu dalam memproses data input pengguna.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nilai input dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!