Bagaimana untuk menetapkan nilai pilihan berbilang pilihan menggunakan JQuery

Fungsi berbilang pilih dalam JQuery adalah sangat biasa, dan menetapkan nilai yang dipilih juga merupakan sebahagian daripada operasi berbilang pilih JQuery. Menggunakan JQuery untuk menetapkan nilai yang dipilih boleh melaksanakan operasi dengan cepat, meningkatkan kemudahan pengguna dan membolehkan pelbagai keperluan fungsian yang kompleks.

Artikel ini akan memperkenalkan cara menggunakan JQuery untuk menetapkan nilai pilihan berbilang pilihan dan menggunakan contoh untuk membantu pemahaman.

1. Operasi asas pilihan berbilang JQuery

Sebelum mula memperkenalkan tetapan nilai yang dipilih, anda perlu memahami operasi asas berbilang pilihan JQuery.

1. Dapatkan nilai yang dipilih

Mendapatkan nilai pilihan kotak berbilang pilihan dalam JQuery adalah sangat mudah dan boleh dicapai dengan cepat melalui kaedah val(). Contohnya:

var selectVal = $('input[type=checkbox]:checked').val();

Kod di atas akan memilih pilihan kotak semak jenis yang dipilih, kemudian dapatkan nilai yang dipilih dan simpan dalam pembolehubah selectVal.

2. Tetapkan keadaan yang dipilih

Apabila anda perlu menetapkan keadaan pilihan berbilang pilihan, hanya gunakan kaedah prop() atau attr(). Contohnya:

$('input[type=checkbox]').attr('checked', true);

Barisan kod di atas akan menetapkan semua pilihan jenis kotak semak kepada dipilih.

3. Dapatkan kuantiti yang dipilih

Mendapatkan kuantiti yang dipilih juga sangat mudah, hanya gunakan panjang tatasusunan item yang dipilih, contohnya:

var count = $('input[type=checkbox]:checked').length;

2 . Cara menetapkan nilai Terpilih

Setelah memahami operasi berbilang pilih asas, mari perkenalkan cara menetapkan nilai yang dipilih bagi berbilang pilihan.

1. Tetapkan nilai pilihan berbilang pilihan

Untuk menetapkan nilai pilihan berbilang pilihan, anda perlu terlebih dahulu menentukan kandungan dan nilai pilihan item yang dipilih. Contohnya:

<input type="checkbox" name="color" value="red">红色
<input type="checkbox" name="color" value="yellow">黄色
<input type="checkbox" name="color" value="blue">蓝色

Dalam kod di atas, pilihan yang atribut namanya berwarna ialah berbilang pilihan dan nilai yang sepadan bagi setiap item ialah merah, kuning dan biru masing-masing.

Ia juga sangat mudah untuk menetapkan status pilihan yang disemak melalui JQuery Anda hanya perlu menetapkan atribut yang disemak bagi pilihan yang sepadan kepada benar. Contohnya:

$('input[name=color][value=red]').prop('checked', true);

Kod di atas akan menetapkan pilihan yang atribut namanya berwarna dan nilainya berwarna merah kepada keadaan yang dipilih.

2 Dapatkan nilai pilihan berbilang pilihan

Untuk mendapatkan nilai pilihan berbilang pilihan, anda perlu menapis pilihan yang dipilih dalam keseluruhan kumpulan berbilang pilihan dan menggunakan nilai tersebut daripada pilihan ini sebagai hasilnya dan tambahkannya pada tatasusunan. Contohnya:

var selected = [];
$('input[name=color]:checked').each(function() {
  selected.push($(this).val());
});

Kod di atas akan merentasi pilihan yang dipilih yang atribut namanya berwarna, dan menambah nilai setiap pilihan pada tatasusunan yang dipilih.

3. Kes Praktikal

Senario yang paling biasa menggunakan JQuery untuk menetapkan nilai yang dipilih bagi berbilang pilihan ialah operasi borang. Berikut adalah kes praktikal supaya semua orang dapat mengaplikasikan ilmu yang dipelajari dengan lebih baik.

1. Kod HTML

<form>
  <label><input type="checkbox" name="hobby" value="swim">游泳</label>
  <label><input type="checkbox" name="hobby" value="run">跑步</label>
  <label><input type="checkbox" name="hobby" value="basketball">篮球</label>
  <label><input type="checkbox" name="hobby" value="football">足球</label>
  <label><input type="checkbox" name="hobby" value="tennis">网球</label>
  <label><input type="checkbox" name="hobby" value="badminton">羽毛球</label>
</form>

2. Tetapkan nilai yang dipilih dan dapatkan nilai yang dipilih

// 设置选中值
$("form input[name=hobby][value=run]").prop("checked", true);
$("form input[name=hobby][value=football]").prop("checked", true);

// 获取选中值
var hobbyArr = [];
$("form input[name=hobby]:checked").each(function(){
  hobbyArr.push($(this).val());
});
console.log(hobbyArr); // ["run", "football"]

Kod di atas menetapkan atribut nama kepada hobi dan nilai kepada Pilihan larian dan bola sepak dipilih, dan semua nilai yang dipilih disimpan dalam tatasusunan untuk output.

4. Ringkasan

Di atas adalah pengenalan kepada menetapkan nilai pilihan berbilang pilihan dalam JQuery. Melalui contoh dalam artikel ini, pembaca boleh memahami dengan lebih baik operasi asas pilihan berbilang JQuery dan cara menetapkan nilai pilihan berbilang pilihan. Sebagai rangka kerja JavaScript yang sangat baik, operasi berkuasa JQuery dan sintaks yang mudah menjadikan pembangunan web lebih cekap.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan nilai pilihan berbilang pilihan menggunakan JQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!