html中实现选项的全反选,JS实现CheckBox 全选、反选、全不选

HTML部分 勾选框

全选

反选

全不选

第一个

第二个

第三个

第四个

第五个

JS部分

function selectAll() {

// 获取到body中所有checkbox

var checkbox = document.body.querySelectorAll("input[type='checkbox']");

var checkboxNum = checkbox.length;

for (var i = 0; i < checkboxNum; i ++ ) {

checkbox[i].checked = true;

}

}

function selectInvert() {

var checkbox = document.body.querySelectorAll("input[type='checkbox']");

var checkboxNum = checkbox.length;

for (var i = 0; i < checkboxNum; i ++ ) {

// 取反自身的状态

checkbox[i].checked = !checkbox[i].checked;

}

}

function unselectAll() {

var checkbox = document.body.querySelectorAll("input[type='checkbox']");

var checkboxNum = checkbox.length;

for (var i = 0; i < checkboxNum; i ++ ) {

checkbox[i].checked = false;

}

}

同样功能，jQuery实现

function selectAll() {

var checkbox = $("input[type='checkbox']");

checkbox.each(function() {

$(this).prop("checked", true);

})

}

function selectInvert() {

var checkbox = $("input[type='checkbox']");

checkbox.each(function() {

var status = !$(this).prop("checked");

$(this).prop("checked", status);

})

}

function unselectAll() {

var checkbox = $("input[type='checkbox']");

checkbox.each(function() {

$(this).prop("checked", false);

})

}