如何獲取jquery多選框選擇的值？

jQuery是一個非常流行的JavaScript庫，提供了各種方法和函數，可以讓開發者更加輕鬆地處理HTML和CSS以及各種瀏覽器事件。其中，多選框是常見的UI組件之一，本文將從多個方面介紹如何使用jQuery獲取多選框的選中值。

一、通過val()方法獲取選中值

val()方法是jquery用於獲取表單元素的方法之一，其可以獲取單選框、多選框和輸入框的值。

// HTML示例
<form>
  <input type="checkbox" name="option" value="apple"> 蘋果<br>
  <input type="checkbox" name="option" value="banana"> 香蕉<br>
  <input type="checkbox" name="option" value="orange"> 橙子
</form>

// jQuery示例
$('input[name="option"]:checked').each(function() {
  console.log($(this).val());
});

上述代碼使用了選擇器選取了所有被選中的多選框，然後使用each()方法遍歷它們，再利用val()方法獲取每個多選框選中的值。

二、使用serializeArray()方法獲取選中值

serializeArray()方法可以將一個或多個表單元素的值序列化成一個數組，這個數組可以輕鬆地被提交到伺服器以便進行進一步的處理。

// HTML示例
<form>
  <input type="checkbox" name="option" value="apple"> 蘋果<br>
  <input type="checkbox" name="option" value="banana"> 香蕉<br>
  <input type="checkbox" name="option" value="orange"> 橙子
</form>

// jQuery示例
console.log($('form').serializeArray());

上述代碼使用了選擇器選取了整個表單，然後使用serializeArray()方法序列化了這個表單並列印出了結果。

三、使用map()方法獲取選中值

map()方法可以遍歷一個數組，並將其中的每個元素轉換成一個新的元素。

// HTML示例
<form>
  <input type="checkbox" name="option" value="apple"> 蘋果<br>
  <input type="checkbox" name="option" value="banana"> 香蕉<br>
  <input type="checkbox" name="option" value="orange"> 橙子
</form>

// jQuery示例
var selectedOptions = $('input[name="option"]:checked').map(function() {
  return $(this).val();
}).get();

console.log(selectedOptions);

上述代碼使用了選擇器選取了所有被選中的多選框，然後使用map()方法遍歷它們，再利用val()方法獲取每個多選框選中的值，最終使用get()方法把結果轉換成一個數組並列印出來。

四、使用each()方法獲取選中值

each()方法可以遍歷一個數組或對象，並執行一個回調函數。

// HTML示例
<form>
  <input type="checkbox" name="option" value="apple"> 蘋果<br>
  <input type="checkbox" name="option" value="banana"> 香蕉<br>
  <input type="checkbox" name="option" value="orange"> 橙子
</form>

// jQuery示例
var selectedOptions = [];

$('input[name="option"]:checked').each(function() {
  selectedOptions.push($(this).val());
});

console.log(selectedOptions);

上述代碼使用選擇器選取了所有被選中的多選框，然後使用each()方法遍歷它們，再利用val()方法獲取每個多選框選中的值並存儲到selectedOptions數組中，最終列印出來。

五、使用prop()方法獲取選中值

prop()方法可以用於獲取元素的屬性，例如選中狀態。

// HTML示例
<form>
  <input type="checkbox" name="option" value="apple"> 蘋果<br>
  <input type="checkbox" name="option" value="banana"> 香蕉<br>
  <input type="checkbox" name="option" value="orange"> 橙子
</form>

// jQuery示例
var selectedOptions = [];

$('input[name="option"]').each(function() {
  if ($(this).prop('checked')) {
    selectedOptions.push($(this).val());
  }
});

console.log(selectedOptions);

上述代碼使用了選擇器選取了所有的多選框，然後使用each()方法遍歷它們，再利用prop()方法獲取每個多選框的checked屬性來判斷是否選中，選中則將其值存儲到selectedOptions數組中，最終列印出來。

總結

以上就是通過多種方法獲取jquery多選框選擇的值的方法，使用這些方法可以讓我們更加方便地處理表單數據。需要注意的是，在使用map()方法或each()方法獲取多選框的選中值時，要注意判斷選中狀態。