jquery,获取复选框选中的值的示例代码
时间: 2023-11-28 18:39:14 浏览: 112
使用 jQuery 获取复选框选中的值,你可以通过以下示例代码来实现:
HTML 代码:
```html
<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="orange">橙子
<button id="btnGetSelectedValues">获取选中的值</button>
<p id="selectedValues"></p>
```
JavaScript 代码:
```javascript
$(document).ready(function() {
$('#btnGetSelectedValues').click(function() {
var selectedValues = [];
$('input[name="fruit"]:checked').each(function() {
selectedValues.push($(this).val());
});
$('#selectedValues').text('选中的值:' + selectedValues.join(', '));
});
});
```
在上面的示例中,我们首先使用 `$('input[name="fruit"]:checked')` 选择器选择所有 name 属性为 "fruit" 且被选中的复选框。然后通过 `.each()` 方法遍历选中的复选框,并使用 `.val()` 方法获取每个复选框的值,并将其添加到 `selectedValues` 数组中。
最后,我们将选中的值通过 `.join(', ')` 方法连接为一个字符串,并将其显示在 `<p>` 元素中。
当用户点击 "获取选中的值" 按钮时,将触发点击事件处理程序,并执行上述代码来获取和显示选中的值。
请根据你的实际需求和 HTML 结构,将上述示例代码适配到你的项目中。
阅读全文