Bagaimana untuk mendapatkan nilai kotak berbilang pilihan dalam jquery (analisis ringkas kaedah)

Dalam pembangunan bahagian hadapan, selalunya diperlukan untuk mendapatkan nilai kotak pilihan untuk diproses atau untuk menentukan sama ada ia dipilih. jQuery ialah perpustakaan JavaScript yang sangat popular yang menyediakan API yang kaya yang membolehkan kami memperoleh nilai kotak berbilang pilihan dengan mudah. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mendapatkan kotak berbilang pilihan.

1. Status kotak berbilang pilihan yang dipilih

Sebelum mendapat nilai kotak berbilang pilih, kita perlu memahami terlebih dahulu status kotak berbilang pilih, iaitu , ditanda atau dinyahtanda ). Kita boleh menggunakan kaedah .prop() untuk mendapatkan atau menetapkan keadaan pilihan kotak berbilang pilihan. Berikut ialah contoh:

<input type="checkbox" id="checkbox1" value="value1" checked>
<label for="checkbox1">选项1</label>

// 获取checkbox1的选中状态
const isChecked = $('#checkbox1').prop('checked');
console.log(isChecked); // 输出true

Hasil keluaran contoh di atas adalah benar, menunjukkan bahawa kotak berbilang pilihan telah dipilih. Jika atribut yang ditanda kotak berbilang pilihan ditukar kepada tidak ditanda, hasil output akan menjadi palsu.

2. Dapatkan nilai kotak berbilang pilihan

Apabila kita perlu mendapatkan nilai kotak berbilang pilih, kita boleh menggunakan kaedah berikut:

1. Gunakan kaedah .each() Melintasi kotak berbilang pilihan

Kita boleh menggunakan kaedah .each() jQuery untuk melintasi semua kotak berbilang pilihan yang dipilih, dapatkan atribut nilainya dan kemudian simpan nilai ini dalam tatasusunan. Berikut ialah contoh:

<input type="checkbox" id="option1" value="value1" checked>
<label for="option1">选项1</label>

<input type="checkbox" id="option2" value="value2" checked>
<label for="option2">选项2</label>

<input type="checkbox" id="option3" value="value3">
<label for="option3">选项3</label>

// 获取所有选中的多选框的值，并存储到数组中
const selectedOptions = [];
$('input[type=checkbox]:checked').each(function() {
  selectedOptions.push($(this).val());
});
console.log(selectedOptions); // 输出["value1", "value2"]

Kod di atas menggunakan pemilih untuk memilih semua kotak semak yang dipilih. Gunakan kaedah .each() untuk merentasi setiap kotak berbilang pilihan yang dipilih dan tambahkan atribut nilai kotak berbilang pilihan ini pada tatasusunan.

2. Gunakan kaedah .serializeArray() untuk mendapatkan nilai kotak berbilang pilihan yang dipilih

Selain menggunakan kaedah .each(), kita juga boleh menggunakan .serializeArray jQuery () kaedah untuk mendapatkan nilai yang dipilih Nilai kotak semak. Kaedah ini akan mengembalikan tatasusunan yang mengandungi nilai semua kotak pilihan yang dipilih. Berikut ialah contoh:

<input type="checkbox" id="choice-1" name="choice" value="1" checked>
<label for="choice-1">选项1</label>

<input type="checkbox" id="choice-2" name="choice" value="2" checked>
<label for="choice-2">选项2</label>

<input type="checkbox" id="choice-3" name="choice" value="3">
<label for="choice-3">选项3</label>

// 获取选中的多选框的值
const selectedValues = $('input[name="choice"]:checked').serializeArray();
console.log(selectedValues); // 输出[{name: "choice", value: "1"}, {name: "choice", value: "2"}]

Kod di atas menggunakan pemilih untuk memilih semua kotak semak yang dipilih. Di sini kita menggunakan atribut .name untuk memilih kotak berbilang pilih dan kaedah .serializeArray() untuk mendapatkan nilai kotak berbilang pilihan yang dipilih.

3. Kesimpulan

Melalui pengenalan di atas, kita boleh mengetahui cara menggunakan jQuery untuk mendapatkan nilai kotak berbilang pilihan. Sama ada anda menggunakan kaedah .each() atau kaedah .serializeArray(), anda boleh mengendalikan nilai kotak berbilang pilihan dengan baik. Walau bagaimanapun, apabila menggunakannya, anda perlu membuat pilihan berdasarkan situasi sebenar untuk melaksanakan logik perniagaan anda sendiri dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nilai kotak berbilang pilihan dalam jquery (analisis ringkas kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!