如何使用JQuery設定多選的選取值

JQuery中的多選功能非常常見，而設定選取的值也是JQuery多選操作的一部分。使用JQuery設定選取的值，一方面可以快速實現操作，另一方面可以提高使用者操作的便利性，並且能夠實現各種複雜功能的要求。

本文將介紹如何使用JQuery設定多重選取的選取值，並透過實例輔助理解。

一、JQuery多選的基本運算

在開始介紹設定選取值之前，需要先了解JQuery多選的基本運算。

1. 取得選取的值

在JQuery中取得多重選取框的選取值非常簡單，只需要透過val()方法就能快速實作。例如：

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

上面的程式碼會選取類型為checkbox且被選取的選項，然後取得選取的值並儲存在selectVal變數中。

2. 設定選取狀態

需要設定多選項選取狀態時，只需使用prop()或attr()方法即可。例如：

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

上面這行程式碼會將所有型別為checkbox的選項都設為選取狀態。

3. 取得選取的數量

取得選取的數量也很簡單，只需使用選取項目陣列的長度，例如：

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

二、如何設定選取的值

了解了基本的多選操作之後，接下來介紹如何設定多選項的選取值。

1. 設定多重選取的選取值

設定多重選取的選取值，需要先確定選取項目的內容和選項值。例如：

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

上面的程式碼中，name屬性為color的選項都是多選項，而每個對應的value值分別為red、yellow和blue。

要透過JQuery設定選項的選取狀態，也很簡單，只需要設定對應選項的checked屬性為true即可。例如：

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

上面的程式碼會將name屬性為color，且value值為red的選項設定為選取狀態。

2. 取得多選的選取值

取得多選的選取值，就需要在整個多選項組內篩選出被選取的選項，以這些選項的value值為結果並將它們加入到一個數組中。例如：

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

上面的程式碼會將選取的name屬性為color的選項遍歷一遍，並將每個選項的value值都加到陣列selected中。

三、實戰案例

使用JQuery設定多個選項的選取值最常見的場景是表單運算。以下是一個實戰案例，以便大家更好的應用所學。

1. 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. 設定選取值並取得選取值

// 设置选中值
$("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"]

上面的程式碼分別設定name屬性為hobby，value分別為run和football的選項為選取狀態，並將所有選取的值存入一個陣列中輸出。

四、總結

以上就是JQuery中設定多選選項選取值的簡介。透過本文的實例，讀者可以更好地理解JQuery多選的基本操作以及如何設定多個選項的選取值。 JQuery作為一個優秀的JavaScript框架，其強大的操作和便利的語法，讓Web開發更有效率。

以上是如何使用JQuery設定多選的選取值的詳細內容。更多資訊請關注PHP中文網其他相關文章！