jquery实现全选、反选、获得所有选中的checkbox

针对这个问题，我可以提供以下的完整攻略。

一、通过 jQuery 实现全选、反选的步骤

1. 全选

通过以下的代码，可以实现全选的功能：

// 给全选按钮绑定 click 事件
$('#selectAll').click(function(){
  $('input[type="checkbox"]').prop('checked', true);
})

代码说明：

• $('#selectAll')：通过 $('#id') 选择器，选择 ID 为 selectAll 的元素。
• click()：绑定 click 事件。
• $('input[type="checkbox"]').prop('checked', true)：选择所有的 input 标签，并将它们的 checked 属性设置为 true。

2. 反选

通过以下的代码，可以实现反选的功能：

// 给反选按钮绑定 click 事件
$('#unselectAll').click(function(){
  $('input[type="checkbox"]').each(function(){
    $(this).prop('checked', !$(this).prop('checked'));
  })
})

代码说明：

• $('#unselectAll')：通过 $('#id') 选择器，选择 ID 为 unselectAll 的元素。
• click()：绑定 click 事件。
• $('input[type="checkbox"]').each()：选择所有的 input 标签，并使用 each() 方法进行遍历。
• $(this).prop('checked', !$(this).prop('checked'))：对于每一个遍历到的 input 标签，将它的 checked 属性设置为该属性的相反值。

二、通过 jQuery 获得所有选中的 checkbox 的步骤

通过以下的代码，可以获得所有选中的 checkbox：

// 给获取选中按钮绑定 click 事件
$('#getSelected').click(function(){
  var selected = [];
  $('input[type="checkbox"]:checked').each(function(){
    selected.push($(this).val());
  });
  console.log(selected);
});

代码说明：

• $('#getSelected')：通过 $('#id') 选择器，选择 ID 为 getSelected 的元素。
• click()：绑定 click 事件。
• var selected = []：定义一个空数组，存储选中的 checkbox 的值。
• $('input[type="checkbox"]:checked').each()：选择所有已经选中的 checkbox，并遍历它们。
• selected.push($(this).val())：将遍历到的 checkbox 的值存储到 selected 数组中。
• console.log(selected)：打印 selected 数组的值。

以上就是通过 jQuery 实现全选、反选和获得所有选中的 checkbox 的完整攻略。