如何使用 jquery 获取多个选定的值 - Javascript

在开发 web 应用程序时，经常需要从多个选项中选择一个或多个值。这时就需要使用 jQuery 的选择器来获取这些值。

获取多个选中的值

假设你有一个下拉列表和一个多选框组，他们都有不同的选项。现在你需要获取用户选择的所有值。

HTML 代码

<select id="mySelect" multiple>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
</select>

<div id="myCheckboxes">
  <label><input type="checkbox" name="color" value="red"> Red</label>
  <label><input type="checkbox" name="color" value="green"> Green</label>
  <label><input type="checkbox" name="color" value="blue"> Blue</label>
  <label><input type="checkbox" name="color" value="yellow"> Yellow</label>
</div>

jQuery 代码

首先，我们需要使用 jQuery 的选择器获取这些元素的值。对于 select 元素，我们可以使用以下代码：

var selectedValues = $('#mySelect').val();

对于多选框，我们可以使用以下代码：

var checkedValues = $('input[name="color"]:checked').map(function() {
  return $(this).val();
}).get();

这里我们使用了 jQuery 的 map() 方法来返回选中的值，然后使用 get() 方法将其转换为数组。

完整代码

$(document).ready(function() {
  $('button').click(function() {
    var selectedValues = $('#mySelect').val();
    var checkedValues = $('input[name="color"]:checked').map(function() {
      return $(this).val();
    }).get();

    console.log(selectedValues);
    console.log(checkedValues);
  });
});

Markdown 返回代码片段

```html
<select id="mySelect" multiple>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
</select>

<div id="myCheckboxes">
  <label><input type="checkbox" name="color" value="red"> Red</label>
  <label><input type="checkbox" name="color" value="green"> Green</label>
  <label><input type="checkbox" name="color" value="blue"> Blue</label>
  <label><input type="checkbox" name="color" value="yellow"> Yellow</label>
</div>
```

```javascript
$(document).ready(function() {
  $('button').click(function() {
    var selectedValues = $('#mySelect').val();
    var checkedValues = $('input[name="color"]:checked').map(function() {
      return $(this).val();
    }).get();

    console.log(selectedValues);
    console.log(checkedValues);
  });
});
```

以上代码中的 console.log() 语句用于在控制台中输出获取的值，你也可以根据自己的需求来使用这些值。