react 全选反选_js中怎么将createElement出来的复选框实现全选，全不选，反选效果？...

const checkBoxs = ["篮球","足球","羽毛球","乒乓球"];

const creactCheckBox = text => {

let checkBox = document.createElement("input");

checkBox.setAttribute("type","checkBox");

document.body.insertAdjacentElement("beforeend", checkBox);

document.body.insertAdjacentText("beforeend", text);

};

checkBoxs.forEach((item,index) => creactCheckBox(item));

const selector = dom => document.querySelectorAll(dom);

const [checkAllBtn,checkNotBtn,checkRevBtn] = [selector("#checkAllBtn")[0],selector("#checkNotBtn")[0],selector("#checkRevBtn")[0]];

const actions = {

checkAll(){

selector("input[type='checkBox']").forEach(function (option,index) {

option.checked = true

})

},

checkNot(){

selector("input[type='checkBox']").forEach(function (option,index) {

option.checked = false

})

},

checkRev(){

selector("input[type='checkBox']").forEach(function (option,index) {

option.checked ? option.checked = false : option.checked = true

})

}

};

checkAllBtn.addEventListener("click",function(){actions.checkAll()});

checkNotBtn.addEventListener("click",function(){actions.checkNot()});

checkRevBtn.addEventListener("click",function(){actions.checkRev()})

花了三分钟帮你写,包含ES6箭头函数

const

forEach

解构赋值

querySelectorAll