hujung hadapan web
tutorial js
Tunjukkan kotak pilihan yang dipilih pada halaman lain menggunakan JavaScript?
Tunjukkan kotak pilihan yang dipilih pada halaman lain menggunakan JavaScript?
Dalam artikel ini, anda akan belajar cara mendapatkan semua kotak pilihan pada halaman lain menggunakan JavaScript. Kotak semak ialah jenis pilihan, jenis pilihan binari yang benar atau palsu. Ia adalah pilihan dalam bentuk GUI yang dibentangkan pada halaman, yang dengannya kita boleh mendapatkan lebih banyak input daripada pengguna. Benar jika kotak ditandakan, yang bermaksud pengguna telah memilih nilai jika ia tidak ditanda, ia bermakna pengguna belum memilih nilai.
Perbezaan antara kotak pilihan dan butang radio ialah dengan butang radio pengguna boleh memilih hanya satu nilai manakala dengan kotak pilihan pengguna akan dapat memilih berbilang nilai.
Contoh kotak semak
<html>
<body>
<input type="checkbox" value="false" onchange="alert('checked')"/>Example of checkbox <br/>
</body>
</html>
Daripada output di atas, anda boleh melihat bahawa kotak ditandakan, yang menunjukkan bahawa pengguna telah memilih nilai.
Kaedah JSON.parse() sentiasa mengambil argumen dalam format rentetan (iaitu kita perlu mengelilingi nilai dengan petikan tunggal).
Contoh
Jom lihat contoh program:
<html>
<body>
<form>
<h1>Print checked button values.</h1> <hr/>
<big>Select your favourite fruits: </big><br />
<input type="checkbox" name="inputCheck" value="Apple" />Apple<br />
<input type="checkbox" name="inputCheck" value="Mango" />Mango<br />
<input type="checkbox" name="inputCheck" value="Banana" />Banana<br />
<input type="checkbox" name="inputCheck" value="Orange" />Orange<br />
<p>
<input type="submit" id="submitBtn" value="submit" onclick="printChecked()"/>
</p>
</form>
<script type="text/javascript">
function printChecked() {
var items = document.getElementsByName("inputCheck");
var selectedItems = "";
for (var i = 0; i < items.length; i++) {
if (items[i].type == "checkbox" && items[i].checked == true){
selectedItems+=items[i].value+"";
}
}
alert(selectedItems);
}
</script>
</body>
</html>
Daripada output, anda boleh melihat bahawa kami sedang mencetak kotak pilihan yang ditentukan oleh mesej amaran pada halaman yang sama. Sebelum itu, mari kita fahami dulu konsep storan tempatan.
Menggunakan storan tempatan dalam JavaScript
LocalSorage ialah sejenis storan data dalam pelayar web. Data boleh disimpan menggunakan laman web ini dan data akan sentiasa kekal dalam storan dan tidak akan hilang apabila anda menutup pelayar anda.
Pilihan lain ialah kuki, yang juga digunakan untuk menyimpan data tapak. Had storan ini adalah lebih kurang. 2Mb dalam pelayar manakala localStorage dilengkapi dengan storan 5Mb yang lebih besar dari segi saiz storan kuki
Untuk menggunakan localStorage dengan berkesan dan selamat, terdapat beberapa istilah yang harus diingat oleh pengguna.
Tidak selamat dalam menyimpan data sensitif seperti kata laluan dan maklumat lain yang pengguna tidak sepatutnya berkongsi secara terbuka.
Adakah data disimpan dalam penyemak imbas itu sendiri dan bukannya pada pelayan? Dan operasinya adalah segerak, iaitu, satu demi satu operasi diproses secara berurutan.
Ia mempunyai kapasiti data storan yang lebih besar berbanding saiz storan kuki.
Hampir semua pelayar moden menyokongnya dan serasi dengan versi terkini.
Semak keserasian penyemak imbas LocalStorage
Untuk menyemak sama ada penyemak imbas anda menyokong localStorage, laksanakan kod berikut dalam konsol penyemak imbas, jika ia tidak ditakrifkan, ini bermakna penyemak imbas anda menyokong localStorage.
Contoh
<html>
<body>
<script type="text/javascript">
if (typeof(Storage) !== "undefined") {
document.write("Your browser support localStorage.")
}
else {
document.write("Your browser doesn't support localStorage.")
}
</script>
</body>
</html>
Kaedah localStorage digunakan
1. setItem()
Kaedah ini digunakan untuk menambah data pada storan. Kami menyerahkan kunci dan nilai kepada kaedah ini untuk menambah data.
localStorage.setItem("name", "Kalyan");
2. GetItem()
Kaedah ini digunakan untuk mendapatkan atau mendapatkan semula data yang ada dalam storan. Kami menyerahkan kunci ke dalam kaedah ini untuk mendapatkan nilai yang dikaitkan dengan kunci itu.
localStorage.getItem("name");
3. padam item()
Kaedah ini digunakan untuk memadam data tertentu yang terdapat dalam storan. Kami menyerahkan kunci kepada kaedah ini dan ia memadamkan pasangan nilai kunci yang wujud sebagai data dalam storan.
localStorage.removeItem("name");
4. jelas()
Kaedah ini digunakan untuk mengosongkan data storan tempatan yang terdapat dalam storan.
localStorage.clear();
Petua: Untuk menyemak saiz localStorage, anda boleh melaksanakan sintaks berikut dalam konsol penyemak imbas
console.log(localStorage.length);
Mari hantar nilai ini ke halaman lain. Kami mula-mula akan menambah semua nilai disemak yang dipilih ke storan tempatan menggunakan setItem() dan kemudian pada halaman seterusnya kami akan mengeluarkan nilai menggunakan kaedah getItem().
Fungsi JavaScript kami yang menambah nilai pada storan setempat ialah
<script type="text/javascript">
function printChecked() {
var items = document.getElementsByName("inputCheck");
var arr=[];
for (var i = 0; i < items.length; i++) {
if (items[i].type == "checkbox" && items[i].checked == true){
arr.push(items[i].value);
}
}
localStorage.setItem("ddvalue", arr);
return true;
}
</script>
Di sini, dapatkan semua item kotak semak dalam pembolehubah item, dan dalam tatasusunan arr, kami akan menambah semua item yang telah ditandakan sebagai benar, menunjukkan bahawa pengguna telah memilihnya. dan tambahkan tatasusunan pada storan setempat.
Fungsi JavaScript untuk mendapatkan semula nilai daripada storan halaman kedua
<script>
var arr=localStorage.getItem("ddvalue");
var selectedItems = "";
for (var i = 0; i < arr.length; i++) {
selectedItems += arr[i] + ", ";
}
document.getElementById("result").innerHTML= selectedItems;
</script>
Tatasusunan arr di sini menyimpan nilai yang diperoleh daripada storan bersama dengan nilai utama. Kami akan mengambil pembolehubah rentetan kosong bernama item yang dipilih dan kemudian menambahkan semua item tatasusunan. Akhirnya, kami akan mencetak hasil id di tempatnya.
halaman1.html
<html>
<body>
<form action="page2.html">
<h1>Page1</h1> <hr/>
<big>Select your favourite fruits: </big><br />
<input type="checkbox" name="inputCheck" value="Apple" />Apple<br />
<input type="checkbox" name="inputCheck" value="Mango" />Mango<br />
<input type="checkbox" name="inputCheck" value="Banana" />Banana<br />
<input type="checkbox" name="inputCheck" value="Orange" />Orange<br />
<p><input type="submit" id="submitBtn" value="submit" onclick="printChecked()"/></p>
</form>
<script type="text/javascript">
function printChecked() {
var items = document.getElementsByName("inputCheck");
var arr=[];
for (var i = 0; i < items.length; i++) {
if (items[i].type == "checkbox" && items[i].checked == true){
arr.push(items[i].value);
}
}
localStorage.setItem("ddvalue", arr);
document.write("Submitted Successfully. <br> To see the result, please run the Page2.html")
return true;
}
</script>
</body>
</html>
halaman2.html
<html>
<head>
<title>Print checked button values on another page- JavaScript.</title>
</head>
<body>
<h1>Page2</h1>
<hr/>
The Selected course is: <b><span id="result"></span></b>
<script>
var arr=localStorage.getItem("ddvalue");
arr=arr.split(",");
var selectedItems = "";
for (var i = 0; i < arr.length; i++) {
selectedItems += "<br>" + arr[i] ;
}
document.getElementById("result").innerHTML= selectedItems;
</script>
</body>
</html>
Daripada output, anda boleh melihat bahawa pada halaman pertama page1.html semua item dipaparkan dan apabila pengguna memilih item daripada senarai yang dipilih ia menambahkan semua nilai yang dipilih ke storan dengan nilai nama kunci. Apabila pengguna menekan butang hantar, ia mengubah hala ke halaman seterusnya iaitu page2.html. Pada halaman 2, program akan mengambil nilai yang dipilih pengguna daripada storan menggunakan nilai kunci dan gelung melalui tatasusunan, menambahkan dan mencetak nilai akhir.
Atas ialah kandungan terperinci Tunjukkan kotak pilihan yang dipilih pada halaman lain menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
Demystifying JavaScript: Apa yang berlaku dan mengapa penting
Apr 09, 2025 am 12:07 AM
JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript?
Apr 04, 2025 pm 05:09 PM
Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...
Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido?
atau:
Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido?
Apr 04, 2025 pm 05:36 PM
Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...
Adakah JavaScript sukar belajar?
Apr 03, 2025 am 12:20 AM
Pembelajaran JavaScript tidak sukar, tetapi ia mencabar. 1) Memahami konsep asas seperti pembolehubah, jenis data, fungsi, dan sebagainya. 2) Pengaturcaraan asynchronous tuan dan melaksanakannya melalui gelung acara. 3) Gunakan operasi DOM dan berjanji untuk mengendalikan permintaan tak segerak. 4) Elakkan kesilapan biasa dan gunakan teknik debugging. 5) Mengoptimumkan prestasi dan mengikuti amalan terbaik.
Bagaimana untuk melaksanakan fungsi seretan panel dan drop pelarasan yang serupa dengan vscode dalam pembangunan front-end?
Apr 04, 2025 pm 02:06 PM
Terokai pelaksanaan fungsi seretan panel dan drop panel seperti VSCode di bahagian depan. Dalam pembangunan front-end, bagaimana untuk melaksanakan vscode seperti ...
Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza?
Apr 04, 2025 pm 05:12 PM
Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...
