Tunjukkan kotak pilihan yang dipilih pada halaman lain menggunakan JavaScript?-tutorial js-php.cn

使用 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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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");

Salin selepas log masuk

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");

Salin selepas log masuk

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");

Salin selepas log masuk

4. jelas()

Kaedah ini digunakan untuk mengosongkan data storan tempatan yang terdapat dalam storan.

localStorage.clear();

Salin selepas log masuk

Petua: Untuk menyemak saiz localStorage, anda boleh melaksanakan sintaks berikut dalam konsol penyemak imbas

console.log(localStorage.length);

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!