jquery menentukan sama ada rakan senegara dipilih

Dalam perkembangan harian, kita mungkin menghadapi situasi di mana kita perlu menentukan sama ada elemen adik-beradik dipilih. Sebagai contoh, apabila melaksanakan fungsi pilih tunggal atau berbilang pilihan senarai, kita perlu membuat pemprosesan yang sepadan berdasarkan pemilihan kumpulan elemen yang sama.

Dalam kes ini, jQuery menyediakan beberapa kaedah mudah untuk menentukan status elemen adik beradik yang dipilih. Seterusnya, kami memperkenalkan kaedah ini dan aplikasinya.

1. Status terpilih

Dalam jQuery, kita boleh menggunakan kaedah prop() untuk mendapatkan status elemen yang dipilih. Kaedah ini mengembalikan nilai Boolean yang menunjukkan sama ada elemen dipilih. Contohnya:

var isChecked = $('#checkbox').prop('checked');

Kod di atas akan mendapat status elemen yang dipilih dengan id checkbox dan menyimpan hasilnya dalam pembolehubah isChecked.

Jika kita ingin mendapatkan status terpilih bagi semua elemen dalam sekumpulan elemen, kita boleh menggunakan kod berikut:

var isCheckedArray = $('.checkbox').map(function () {
  return $(this).prop('checked');
});

Kod di atas akan mendapat status terpilih bagi semua elemen dengan kelas checkbox, dan Simpan keputusan dalam tatasusunan isCheckedArray.

2 Tentukan sama ada elemen adik-beradik dipilih

Dengan kaedah mendapatkan status yang dipilih, kita boleh dengan mudah menentukan sama ada elemen adik-beradik dipilih. Antaranya, jQuery menyediakan dua kaedah yang biasa digunakan: siblings() dan next(). Kaedah

1. adik-beradik()

siblings() digunakan untuk mendapatkan semua elemen adik-beradik unsur semasa. Contohnya:

var siblings = $('#checkbox').siblings();

Kod di atas akan mendapat semua elemen adik-beradik elemen dengan id checkbox dan menyimpan hasilnya dalam pembolehubah siblings. Jika kita ingin menentukan sama ada elemen adik-beradik dipilih, kita boleh menggunakan kaedah siblings() selepas kaedah each() untuk merentasi elemen adik-beradik dan menentukan status pilihan mereka secara bergilir-gilir, seperti berikut:

$('#checkbox').siblings().each(function () {
  if ($(this).prop('checked')) {
    // 同胞元素已选中
  } else {
    // 同胞元素未选中
  }
});

Perkara di atas kod akan melintasi id < Semua elemen adik-beradik elemen 🎜> dinilai masing-masing untuk menentukan status pilihan mereka. Kaedah checkbox

next()

digunakan untuk mendapatkan elemen adik beradik seterusnya bagi elemen semasa. Contohnya: next()

var nextElement = $('#checkbox').next();

Kod di atas akan mendapat elemen adik beradik seterusnya bagi elemen dengan id

dan menyimpan hasilnya dalam pembolehubah checkbox. Jika kita ingin menentukan sama ada elemen adik beradik seterusnya dipilih, kita boleh menggunakan kaedah nextElement untuk mendapatkan status pilihannya, seperti berikut: prop()

if ($('#checkbox').next().prop('checked')) {
  // 下一个同胞元素已选中
} else {
  // 下一个同胞元素未选中
}

Kod di atas akan menentukan sama ada elemen adik beradik seterusnya bagi elemen tersebut. dengan id ialah

dipilih. checkbox

3. Senario Aplikasi

Jadi, bagaimana kita boleh menggunakan kaedah di atas dalam pembangunan sebenar? Berikut ialah beberapa senario aplikasi biasa:

Melaksanakan berbilang pilihan dalam senarai

Dalam senarai, kita selalunya perlu melaksanakan berbilang pilihan. Sebagai contoh, pada halaman pemilihan produk, pengguna boleh menyemak berbilang produk untuk penyelesaian. Pada ketika ini, kita perlu menentukan sama ada setiap produk dipilih untuk melengkapkan pemprosesan produk yang dipilih.

Kunci untuk melaksanakan fungsi ini adalah untuk mendapatkan elemen kotak semak di hadapan setiap produk dan menentukan sama ada ia dipilih. Kod pelaksanaan khusus adalah seperti berikut:

<ul>
  <li>
    <input type="checkbox" name="product" value="1">
    商品1
  </li>
  <li>
    <input type="checkbox" name="product" value="2">
    商品2
  </li>
  <li>
    <input type="checkbox" name="product" value="3">
    商品3
  </li>
</ul>

$('input[name="product"]').click(function () {
  var isChecked = $(this).prop('checked');
  var value = $(this).val();

  if (isChecked) {
    // 商品选中
    console.log('商品' + value + '已选中');
  } else {
    // 商品取消选中
    console.log('商品' + value + '已取消选中');
  }
});

Kod di atas akan memantau peristiwa klik semua elemen kotak pilihan dengan atribut

name pada halaman, tentukan status kotak pilihan yang dipilih setiap kali ia diklik, dan mencetak maklumat yang sepadan. product

Melaksanakan pemilihan radio eksklusif

Dalam sesetengah senario, kita perlu melaksanakan pemilihan radio eksklusif sekumpulan elemen, iaitu apabila satu elemen dipilih, elemen lain tidak dipilih. Sebagai contoh, pada halaman pemilihan kaedah pembayaran, pengguna hanya boleh memilih satu kaedah pembayaran. Pada masa ini, kita boleh menggunakan kod berikut untuk melaksanakan fungsi pemilihan radio eksklusif:

<ul>
  <li>
    <label><input type="radio" name="payment" value="alipay"> 支付宝</label>
  </li>
  <li>
    <label><input type="radio" name="payment" value="wechat"> 微信支付</label>
  </li>
  <li>
    <label><input type="radio" name="payment" value="unionpay"> 银联支付</label>
  </li>
</ul>

$('input[name="payment"]').click(function () {
  $('input[name="payment"]').prop('checked', false); // 取消其他选项的选中状态
  $(this).prop('checked', true); // 当前选项设为选中
});

Kod di atas akan memantau peristiwa klik semua elemen butang radio dengan atribut

name pada Setiap kali ia diklik Nyahtanda pilihan lain dan buat pilihan semasa dipilih. payment

Ringkasan

Dalam jQuery, kita boleh menggunakan kaedah

untuk mendapatkan status elemen yang dipilih, gunakan kaedah prop() untuk mendapatkan semua elemen adik-beradik elemen dan menggunakan kaedah siblings() untuk mendapatkan elemen The next sibling element. Kaedah ini boleh membantu kami menentukan status elemen adik beradik yang dipilih dan melaksanakan pelbagai fungsi praktikal. next()

Atas ialah kandungan terperinci jquery menentukan sama ada rakan senegara dipilih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!