Bagaimana untuk melaksanakan penambahan, penolakan dan pemadaman pemilihan radio dalam jquery

Dengan perkembangan pesat Internet, teknologi bahagian hadapan telah menarik lebih banyak perhatian, antaranya jquery merupakan salah satu perpustakaan js yang biasa digunakan di bahagian hadapan. Dalam pembangunan tapak web, selalunya perlu melakukan operasi tambah, tolak dan pemadaman pada pemilihan produk Artikel ini akan memperkenalkan cara menggunakan jquery untuk melaksanakan penambahan, penolakan dan pemadaman pilihan tunggal.

1. Operasi pilihan tunggal

Apabila memilih produk, biasanya kita perlu melakukan operasi pilihan tunggal, iaitu, hanya satu yang boleh dipilih antara berbilang pilihan. Berikut mengambil kategori produk sebagai contoh untuk menunjukkan cara menggunakan jquery untuk melaksanakan operasi pemilihan tunggal.

Mula-mula, jana berbilang butang radio melalui teg input di halaman hujung hadapan, seperti yang ditunjukkan dalam kod berikut:

<div class="category">
  <input type="radio" name="radio" value="1"/>电脑
  <input type="radio" name="radio" value="2"/>手机
  <input type="radio" name="radio" value="3"/>电视
</div>

Kod di atas menjana tiga butang radio, dan namanya ialah "radio", dan nilainya ialah 1, 2, dan 3 masing-masing. Tujuannya adalah untuk memudahkan mendapatkan nilai yang dipilih melalui jquery. Jika anda tidak memberi nama butang radio, jquery tidak akan dapat mendapatkan nilai yang dipilih.

Seterusnya, anda perlu menulis kod jquery untuk melaksanakan operasi pemilihan radio:

$('.category input').click(function(){
  $('.category input').attr('checked',false);
  $(this).attr('checked',true);
})

Fungsi kod di atas adalah untuk menetapkan atribut "ditanda" semua butang apabila pengguna mengklik butang butang radio adalah palsu, dan kemudian menetapkan atribut "disemak" butang semasa kepada benar. Melakukan ini memastikan bahawa hanya satu butang radio dipilih pada satu masa.

2. Operasi tambah dan tolak

Seterusnya, kami akan memperkenalkan cara menggunakan jquery untuk melaksanakan operasi tambah dan tolak. Apabila memilih produk, kita mungkin perlu memilih kuantiti produk, dalam hal ini kita perlu menggunakan butang tambah dan tolak untuk mencapainya. Mari kita ambil pemilihan kuantiti sebagai contoh untuk menunjukkan cara menggunakan jquery untuk melaksanakan operasi tambah dan tolak.

Pertama, jana kod html untuk pemilihan kuantiti di halaman hujung hadapan:

<div class="quantity">
  <button class="minus">-</button>
  <input type="text" name="quantity" value="1" class="number" disabled>
  <button class="plus">+</button>
</div>

Kod di atas menjana kotak pemilihan kuantiti, termasuk butang tolak, kotak input kuantiti dan butang tambah. Nilai awal kotak input kuantiti ialah 1 dan dilumpuhkan, jadi pengguna hanya boleh menukar kuantiti melalui butang tambah dan tolak. Selain itu, setiap butang diberi nama kelas untuk memudahkan pengikatan melalui jquery.

Seterusnya, anda perlu menulis kod jquery untuk melaksanakan operasi tambah dan tolak:

$('.quantity .minus').click(function(){
  var num = parseInt($('.quantity .number').val());
  if(num > 1){
    $('.quantity .number').val(num - 1);
  }else{
    alert('数量不能小于1');
  }
})
$('.quantity .plus').click(function(){
  var num = parseInt($('.quantity .number').val());
  $('.quantity .number').val(num + 1);
})

Fungsi kod di atas adalah untuk mendapatkan nilai semasa dalam kotak input kuantiti melalui jquery apabila pengguna klik butang tolak, jika nilainya lebih besar daripada 1, maka kurangkan satu; Apabila pengguna mengklik butang tambah, nilai kotak input kuantiti terus meningkat sebanyak satu. Ini mencapai fungsi penambahan dan penolakan yang mudah.

3. Operasi Padam

Akhir sekali, kami akan memperkenalkan cara menggunakan jquery untuk melaksanakan operasi padam. Dalam pemilihan produk, kita mungkin perlu memadamkan produk, dalam hal ini kita perlu menggunakan butang padam. Mari kita ambil senarai produk sebagai contoh untuk menunjukkan cara menggunakan jquery untuk melaksanakan operasi pemadaman.

Pertama, jana kod html senarai produk di halaman hujung hadapan:

<ul>
  <li>
    <img src="goods1.jpg">
    <h2>商品1</h2>
    <p>价格：99元</p>
    <button class="delete">删除</button>
  </li>
  <li>
    <img src="goods2.jpg">
    <h2>商品2</h2>
    <p>价格：199元</p>
    <button class="delete">删除</button>
  </li>
  <li>
    <img src="goods3.jpg">
    <h2>商品3</h2>
    <p>价格：299元</p>
    <button class="delete">删除</button>
  </li>
</ul>

Kod di atas menjana senarai produk, setiap produk termasuk imej produk, nama produk, harga produk, dan butang padam. Butang padam juga diberi nama kelas untuk memudahkan pengikatan melalui jquery.

Seterusnya, anda perlu menulis kod jquery untuk melaksanakan operasi pemadaman:

$('.delete').click(function(){
  $(this).parent('li').remove();
})

Fungsi kod di atas adalah untuk mendapatkan elemen induk li butang melalui jquery apabila pengguna mengklik butang padam, dan kemudian Padamkannya. Ini akan melaksanakan operasi pemadaman dalam senarai produk.

Kesimpulan

Melalui tiga demonstrasi kes di atas, kita dapat melihat bahawa menggunakan jquery boleh melaksanakan operasi biasa dengan mudah seperti pemilihan radio, penambahan, penolakan dan pemadaman. Di samping itu, dalam aplikasi praktikal, kami boleh menambah baik dan mengoptimumkan lagi mengikut keperluan khusus. Semoga artikel ini bermanfaat kepada semua.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan penambahan, penolakan dan pemadaman pemilihan radio dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!