jQuery获取多个同name的值详解

在网页开发中，经常会遇到需要获取多个相同name属性的元素的值的情况。比如一个表单中有多个复选框或者多个输入框的name属性相同。这时候就需要用到jQuery来获取这些元素的值。

通过jQuery获取多个同name的值

首先我们需要明确一个概念：jQuery中可以通过选择器来选取多个元素，然后通过遍历这些元素来获取它们的值。在这里，我们可以使用each()方法来循环遍历所有同name属性的元素，然后通过val()方法来获取它们的值。

下面是一个简单的示例代码，假设我们有一个表单中有多个复选框，它们的name属性都为checkbox:

```html
<form>
    <input type="checkbox" name="checkbox" value="1" checked>
    <input type="checkbox" name="checkbox" value="2">
    <input type="checkbox" name="checkbox" value="3" checked>
</form>

<button id="getValues">获取值</button>

<div id="result"></div>

<script src="
<script>
    $(document).ready(function() {
        $('#getValues').click(function() {
            var values = [];
            $('input[name="checkbox"]:checked').each(function() {
                values.push($(this).val());
            });
            $('#result').text('选中的值为：' + values.join(', '));
        });
    });
</script>


在上面的示例中，我们首先选择了所有name属性为`checkbox`且被选中的复选框元素，然后通过each()方法遍历这些元素，利用val()方法获取每个元素的值，将这些值存入数组中，最后通过join()方法将数组转换为字符串显示在页面上。

## 表格展示

为了更直观地展示多个同name的值，我们可以使用表格来展示。下面是一个简单的表格示例：

```markdown
```markdown
| 姓名 | 年龄 |
| ---- | ---- |
| 张三 | 20   |
| 李四 | 25   |
| 王五 | 30   |


## 饼状图展示

我们可以使用mermaid语法中的pie标识来展示一个简单的饼状图，如下所示：

```mermaid
pie
    title 饼状图示例
    "张三": 30
    "李四": 25
    "王五": 45

总结

通过上述示例，我们了解了如何使用jQuery获取多个同name属性的元素的值，并将这些值展示在页面上。在实际开发中，可以根据实际需求进行相应的修改和扩展，实现更加灵活和多样的功能。希望本文对你有所帮助！