如何使用 jQuery 获取数组中所有选定的复选框？

给定一些复选框。任务是使用 JQuery 获取数组中所有选定复选框的值。下面讨论了几种方法：

• jQuery on() 方法
  此方法为所选元素和子元素添加一个或多个事件处理程序。
  句法：

  $(selector).on(event, childSel, data, fun, map)
  

  参数：

  • 事件：此参数是必需的。它指定一个或多个事件或命名空间以添加到所选元素。
    如果有多个事件值，请用空格隔开。事件必须是有效的。
  • childSel：该参数是可选的。它指定事件处理程序应该只附加到定义的子元素。
  • 数据：该参数是可选的。它指定要传递给函数的附加数据。
  • fun：这个参数是必需的。它指定事件发生时要运行的函数。
  • map：它指定了一个事件映射（{event:func(), event:func(), …}）具有一个或多个要添加到所选元素的事件，以及在事件发生时运行的函数。
• jQuery text() 方法
  此方法设置/返回所选元素的文本内容。
  如果使用此方法返回内容，则提供所有匹配元素的文本内容（HTML 标签将被删除）。
  如果使用此方法设置内容，它将替换所有匹配元素的内容。
  句法：
  • 返回文本内容：

    $(selector).text()
    

  • 设置文本内容：

    $(selector).text(content)
    

  • 使用函数设置文本内容：

    $(selector).text(function(index, curContent))
    

  参数：

  • 内容：该参数是必需的。它指定所选元素的新文本内容。
  • 函数(index, curContent)：这个参数是可选的。它指定了一个函数，该函数返回所选元素的新文本内容。
    • index：它返回集合中元素的索引位置。
    • curContent：它返回所选元素的当前内容。
• jQuery val() 方法
  此方法返回/设置匹配元素的 value 属性。
  在返回值的情况下，此方法返回第一个选定元素的 value 属性值。
  在设置值的情况下，此方法为所有选定元素设置值属性的值。
  句法：
  • 返回值属性：

    $(selector).val()
    

  • 设置值属性：

    $(selector).val(value)
    

  • 使用函数设置 value 属性：

    $(selector).val(function(index, cValue))
    

  参数：

  • 值：该参数是必需的。它指定 value 属性的值。
  • 函数(index, cValue)：这个参数是可选的。它指定一个返回要设置的值的函数。
    • index：它返回集合中元素的索引。
    • cValue：返回被选元素的当前值属性。
• JavaScript 数组 push() 方法
  此方法在数组末尾添加新项，并返回新长度。
  句法：

  array.push(item1, item2, ..., itemN)
  

  参数：

  • item1, item2, …, itemN：此参数是必需的。它指定要添加到数组中的项目。

  返回值：
  它返回一个数字，表示数组的新长度。

示例 1：本示例通过选择器选择选中的复选框，然后对每个元素调用.each() 方法，最后将它们推送到数组中。

  

    
        JQuery | Get all selected checkboxes in an array.
    
    
        #GFG_UP {
            font-size: 17px;
            font-weight: bold;
        }
          
        #GFG_DOWN {
            color: green;
            font-size: 24px;
            font-weight: bold;
        }
          
        button {
            margin-top: 20px;
        }
    



  

      
            GeeksforGeeks  
        
    
    
      
     GFG:
     Geeks:
     Geek:
     portal:
    
    
        click here
    
    
    
    
        $('#GFG_UP')
        .text('First check few elements then click on the button.');
        $('button').on('click', function() {
            var array = [];
            $("input:checkbox[name=type]:checked").each(function() {
                array.push($(this).val());
            });
            $('#GFG_DOWN').text(array);
        });
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：
  

示例 2：此示例也执行相同的工作，但采用不同的方法。本示例通过选择器（与上一个不同）选择选中的复选框，然后对每个元素调用.each() 方法，最后将它们推送到数组中。

  

    
        JQuery | Get all selected checkboxes in an array.
    
    
        #GFG_UP {
            font-size: 17px;
            font-weight: bold;
        }
          
        #GFG_DOWN {
            color: green;
            font-size: 24px;
            font-weight: bold;
        }
          
        button {
            margin-top: 20px;
        }
    



  

      
            GeeksforGeeks  
        
    
    
      
     GFG:
     Geeks:
     Geek:
    portal:
    
    
        click here
    
    
    
    
        $('#GFG_UP')
        .text('First check few elements then click on the button.');
        $('button').on('click', function() {
            var array = [];
            $("input:checked").each(function() {
                array.push($(this).val());
            });
            $('#GFG_DOWN').text(array);
        });
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：
  

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。