正文

jquery获取checkbox选中的值

小编
小编 V管理员 /0 评论 /69 阅读
0131
欧意国内注册

jQuery获取checkbox选中的值

在网页开发中，我们经常需要处理用户与表单元素的交互，其中最常见的就是复选框（checkbox），jQuery是一个流行的JavaScript库，它提供了一种简洁、高效的方式来处理DOM元素，在本篇文章中，我们将学习如何使用jQuery获取复选框选中的值。

我们需要在HTML页面中添加一些复选框元素，并为它们添加相应的属性和值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery获取checkbox选中的值</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="myForm">
        <input type="checkbox" name="hobbies" value="reading"> 阅读
        <input type="checkbox" name="hobbies" value="sports"> 运动
        <input type="checkbox" name="hobbies" value="music"> 音乐
        <button type="button" id="submitBtn">提交</button>
    </form>
    <script>
        // 在这里编写jQuery代码
    </script>
</body>
</html>

接下来，我们将使用jQuery的:checked选择器来获取选中的复选框。:checked选择器可以匹配所有选中的复选框元素，我们可以使用它来获取选中的复选框的值，以下是一个简单的示例：

$("#submitBtn").click(function() {
    var checkedValues = [];
    $("input[type='checkbox']:checked").each(function() {
        checkedValues.push($(this).val());
    });
    console.log(checkedValues); // 输出选中的复选框的值
});

在上面的代码中，我们首先为提交按钮添加了一个点击事件监听器，当用户点击提交按钮时，我们将执行一个函数，在这个函数中，我们首先创建了一个名为checkedValues的空数组，用于存储选中的复选框的值，我们使用$("input[type='checkbox']:checked")选择器来获取所有选中的复选框元素，并使用each()方法遍历它们，在遍历过程中，我们将每个选中的复选框的值添加到checkedValues数组中，我们使用console.log()方法输出选中的复选框的值。

现在，当我们运行这个示例时，当我们点击提交按钮时，控制台将输出选中的复选框的值，如果用户选择了“阅读”和“音乐”两个复选框，那么控制台将输出：["reading", "music"]。