jquery如何获取复选框的值

获取复选框的值是 JQuery 中的常见操作之一。下面简单讲解一下如何使用 JQuery 来获取复选框的值。

1. 获取单个复选框的值

要获取单个复选框的值，首先需要给复选框设置一个 id。然后使用 JQuery 的 val() 方法来获取该复选框的状态，即选中（checked）还是未选中（unchecked）。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>获取单个复选框的值</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <input type="checkbox" id="checkbox"> 复选框
  <br/>
  <button id="btn">获取复选框的值</button>
  <script>
    $(document).ready(function() {
      $('#btn').click(function() {
        var isChecked = $('#checkbox').prop('checked');
        alert(isChecked);
      });
    });
  </script>
</body>
</html>

在代码中，我们给复选框设置了一个 id 为 checkbox，然后使用 prop 方法获取复选框的状态，最后使用 alert() 方法来显示复选框的值。

2. 获取多个复选框的值

如果页面上有多个复选框，需要对每个复选框进行循环遍历来获取其值。首先需要给每个复选框添加相同的 class，然后使用 JQuery 的 each() 方法对每个复选框进行遍历。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>获取多个复选框的值</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <input type="checkbox" class="checkbox" value="1"> 复选框1
  <br/>
  <input type="checkbox" class="checkbox" value="2"> 复选框2
  <br/>
  <input type="checkbox" class="checkbox" value="3"> 复选框3
  <br/>
  <button id="btn">获取复选框的值</button>
  <script>
    $(document).ready(function() {
      $('#btn').click(function() {
        var result = "";
        $('.checkbox').each(function() {
          if($(this).prop('checked')) {
            result += $(this).val() + ",";
          }
        });
        alert(result);
      });
    });
  </script>
</body>
</html>

在代码中，我们给每个复选框添加了一个相同的 class checkbox，然后使用 each() 方法对所有的复选框进行遍历，判断每个复选框是否被选中，如果被选中，则将该复选框的值添加到 result 变量中，并在最后使用 alert() 方法显示结果。

综上所述，以上便是 JQuery 如何获取复选框的值的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery如何获取复选框的值 - Python技术站

jquery如何获取复选框的值

1. 获取单个复选框的值

2. 获取多个复选框的值

相关文章