checkbox全选/取消全选以及checkbox遍历jQuery实现代码

下面详细讲解“checkbox全选/取消全选以及checkbox遍历jQuery实现代码”的完整攻略。

什么是checkbox全选/取消全选？

在HTML表单中，我们经常要使用多个checkbox来选择多个选项，而有时候又需要在多个checkbox中选择全部选项或者取消全部选项。这就是checkbox全选/取消全选的需求。

checkbox全选/取消全选的实现方式

常见的实现方式有两种：

方式一：通过JavaScript实现

HTML代码示例：

<input type="checkbox" name="checkAll" id="checkAll">全选/取消全选
<input type="checkbox" name="option[]" id="option1" value="1">选项1
<input type="checkbox" name="option[]" id="option2" value="2">选项2
<input type="checkbox" name="option[]" id="option3" value="3">选项3

JavaScript代码示例：

$(document).ready(function(){
  $('#checkAll').click(function(){
    $('input[name="option[]"]').prop('checked', this.checked);
  });
  $('input[name="option[]"]').click(function(){
    if(!this.checked){
      $('#checkAll').prop('checked', false);
    }
  });
});

方式二：通过jQuery实现

HTML代码示例同方式一：

jQuery代码示例：

$(document).ready(function(){
  $('#checkAll').click(function(){
    $('input[name="option[]"]').prop('checked', this.checked);
  });
  $('input[name="option[]"]').click(function(){
    if(!this.checked){
      $('#checkAll').prop('checked', false);
    }
  });
});

checkbox遍历的实现方式

当我们需要使用多个checkbox时，可能需要对其进行遍历，获取选中的checkbox或者选中的checkbox对应的值。这就需要使用到checkbox遍历的功能。

常见的实现方式有两种，同样可以通过JavaScript或者jQuery实现。

方式一：通过JavaScript实现

// 获取选中的checkbox
function getChecked(){
  var checks = document.getElementsByName('option[]');
  var checkedArr = [];
  for(var i=0;i<checks.length;i++){
    if(checks[i].checked){
      checkedArr.push(checks[i]);
    }
  }
  return checkedArr;
}
// 获取选中的checkbox对应的值
function getCheckedValue(){
  var checks = document.getElementsByName('option[]');
  var checkedValueArr = [];
  for(var i=0;i<checks.length;i++){
    if(checks[i].checked){
      checkedValueArr.push(checks[i].value);
    }
  }
  return checkedValueArr;
}

方式二：通过jQuery实现

// 获取选中的checkbox
function getChecked(){
  var checkedArr = $('input[name="option[]"]:checked');
  return checkedArr;
}
// 获取选中的checkbox对应的值
function getCheckedValue(){
  var checkedValueArr = $('input[name="option[]"]:checked').map(function(){
    return $(this).val();
  }).get();
  return checkedValueArr;
}

总结

以上就是关于“checkbox全选/取消全选以及checkbox遍历jQuery实现代码”的攻略，具体实现可以根据需要进行调整。