CSS3+JS实现的个性化全选反选

监控所有列表项下的checkbox是否都处在选中的状态，如果全选中则全选按钮处在选中状态；当存在checkbox未选中时，取消全选按钮的选中状态。

window.onload = function(){
selectAll();
doCheckbox();
}
function Id(id){
return document.getElementById(id);
}
//全选反选操作
function selectAll(){
var checklist = document.getElementsByName("inputCheck");
var Checkall = Id("Checkall");
if(Checkall.checked)
{
Checkall.parentNode.classList.add("act_checkbox");
for(var i=0;i<checklist.length;i++)
{
checklist[i].checked = 1;
checklist[i].parentNode.classList.add("act_checkbox");
}
}else{
Checkall.parentNode.classList.remove("act_checkbox");
for(var j=0;j<checklist.length;j++)
{
checklist[j].checked = 0;
checklist[j].parentNode.classList.remove("act_checkbox");
}
}
}
//部分选中状态下的操作
function noselectall(){
var count=0;
var Checkall = Id("Checkall");
var checklist = document.getElementsByName ("inputCheck");
for(var i=0;i<checklist.length;i++){
if(checklist[i].checked == true){
//选中的操作
count++;
checklist[i].parentNode.classList.add("act_checkbox");
}
}
if(count==checklist.length){ //所有元素都被选中时，打上全选状态
Checkall.checked = true;
Checkall.parentNode.classList.add("act_checkbox");
}
}

//单个元素选中与未选中状态的处理
function doCheckbox(){
var oUl = Id("checkUl");
var Checkall = Id("Checkall");
//将监听操作事件迁移到父亲元素上，采用事件委托的形式处理input点击操作
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'input'){
if(target.checked==false){ //存在元素未被选中时，取消全选状态
Checkall.checked = false;
Checkall.parentNode.classList.remove("act_checkbox");
target.parentNode.classList.remove("act_checkbox");
}else{
noselectall();
}
}
}
}
function submitCheck(){
var arrCheck = [];
var checklist = document.getElementsByName("inputCheck");
for(var i=0;i<checklist.length;i++){
if(checklist[i].checked == true){
//选中的操作
arrCheck.push(checklist[i].value);
}
}
console.log("arrCheck="+arrCheck);
return arrCheck;
}window.onload = function(){
selectAll();
doCheckbox();
}
function Id(id){
return document.getElementById(id);
}
//全选反选操作
function selectAll(){
var checklist = document.getElementsByName("inputCheck");
var Checkall = Id("Checkall");
if(Checkall.checked)
{
Checkall.parentNode.classList.add("act_checkbox");
for(var i=0;i<checklist.length;i++)
{
checklist[i].checked = 1;
checklist[i].parentNode.classList.add("act_checkbox");
}
}else{
Checkall.parentNode.classList.remove("act_checkbox");
for(var j=0;j<checklist.length;j++)
{
checklist[j].checked = 0;
checklist[j].parentNode.classList.remove("act_checkbox");
}
}
}
//部分选中状态下的操作
function noselectall(){
var count=0;
var Checkall = Id("Checkall");
var checklist = document.getElementsByName ("inputCheck");
for(var i=0;i<checklist.length;i++){
if(checklist[i].checked == true){
//选中的操作
count++;
checklist[i].parentNode.classList.add("act_checkbox");
}
}
if(count==checklist.length){ //所有元素都被选中时，打上全选状态
Checkall.checked = true;
Checkall.parentNode.classList.add("act_checkbox");
}
}

//单个元素选中与未选中状态的处理
function doCheckbox(){
var oUl = Id("checkUl");
var Checkall = Id("Checkall");
//将监听操作事件迁移到父亲元素上，采用事件委托的形式处理input点击操作
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'input'){
if(target.checked==false){ //存在元素未被选中时，取消全选状态
Checkall.checked = false;
Checkall.parentNode.classList.remove("act_checkbox");

e8d9
target.parentNode.classList.remove("act_checkbox");
}else{
noselectall();
}
}
}
}
function submitCheck(){
var arrCheck = [];
var checklist = document.getElementsByName("inputCheck");
for(var i=0;i<checklist.length;i++){
if(checklist[i].checked == true){
//选中的操作
arrCheck.push(checklist[i].value);
}
}
console.log("arrCheck="+arrCheck);
return arrCheck;
}

<div class="box">
<div class="cont">
<div class="all_checkbox">
<div class="checkbox act_checkbox">
<input type="checkbox" id="Checkall" name="inputCheckall" checked onclick="selectAll()">
<p><i></i><span>全选</span></p>
</div>
</div>
<ul id="checkUl">
<li>
<div class="checkbox act_checkbox">
<input type="checkbox" name="inputCheck" value="1">
<p><i></i><span>选项一</span></p>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" name="inputCheck" value="2">
<p><i></i><span>选项二</span></p>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" name="inputCheck" value="3">
<p><i></i><span>选项三</span></p>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" name="inputCheck" value="4">
<p><i></i><span>选项四</span></p>
</div>
</li>
</ul>
<p class="but_check"><button onclick="submitCheck()">提交</button></p>
</div>
</div>

.checkbox{
position: relative;
}
.checkbox>input{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
cursor: pointer;
height: 100%;
opacity: 0;
}
.checkbox i{
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-radius: 2px;
vertical-align: middle;
margin-right: 5px;
margin-top: -1px;
position: relative;
}
.act_checkbox i{
border-color: green;
}
.act_checkbox  i:after{
content: '';
position: absolute;
top: 3px;
left: 2px;
width: 10px;
height: 5px;
border-left:3px solid green;
border-bottom:3px solid green;
transform: rotate(-45deg);
}
.all_checkbox{
width: 100px;
padding:20px;
box-sizing: border-box;
}
.but_check{
width: 100%;
padding: 20px 0;
text-align: center;
}
.but_check>button{
padding: 5px 20px;
background: dodgerblue;
color: #fff;
text-align: center;
cursor: pointer;
border: 0;
outline:none;
border-radius: 5px;
}