實現(xiàn)效果
1、勾選后，可以獲取到所勾選的值組成的數(shù)組，并展示到頁面；
2、全部勾選，以及取消勾選時，要相應地更新全選框的狀態(tài)及文字顯示；
3、點擊反選，將所有選項的選擇狀態(tài)置換，并相應改變全選框的狀態(tài)；
實現(xiàn)思路
1、獲取所勾選的值組成的數(shù)組
定義一個數(shù)組checkValues，存放用戶所勾選的內容。
再定義一個函數(shù)getValues()，遍歷選框數(shù)組checks，如果選框checks[i]被選擇，則將value加入數(shù)組。遍歷完成后，使用innerText屬性將數(shù)組展示到頁面中。
捕獲選框的onclick點擊事件，當用戶點擊時，執(zhí)行getValues()。
// 顯示選擇內容的文字
var checkText = document.getElementById("check_text");
// 定義選擇內容的數(shù)組
var checkValues = [];
// 根據(jù)復選框組勾選狀態(tài)，獲取當前已選擇的值并渲染至頁面
function getValues(){
// 數(shù)組置空
checkValues=[];
// 依次檢查是否勾選，將勾選的內容放進數(shù)據(jù)
for(var i = 0; i < checks.length; i++){
if(checks[i].checked){
checkValues.push(checks[i].value);
}
}
// 將選擇的數(shù)組中的內容渲染至頁面
checkText.innerText = JSON.stringify(checkValues);
checkText.style.color = "#09f"
}
2、更新全選框狀態(tài)及文字顯示
定義一個判斷是否全選的函數(shù)isCheckAll()，遍歷選框數(shù)組checks，如果全部被選擇，返回true，否則返回false。
捕獲選框的click點擊事件，當用戶點擊時，判斷isCheckAll()的值，若為真，勾上全選框，并且更新提示文字；若為假，不勾選全選框，文字也為默認的“全選”。文章來源：http://www.zghlxwxcb.cn/news/detail-412506.html
// 全選input勾選框
var checkAll = document.getElementById("checkAll");
// 檢查列表復選框是否全部勾選
function isCheckAll(){
for(var i = 0; i < checks.length; i++){
if(!checks[i].checked){
return false;
}
}
return true;
}
// 根據(jù)全選框狀態(tài)改變文字
function changeText(){
// 如果全選框是勾選的狀態(tài)，提示文字變?yōu)椤叭贿x”
if(checkAll.checked){
document.querySelector("dl>dt>label").innerHTML = "全不選";
}else{
document.querySelector("dl>dt>label").innerHTML = "全選";
}
}
3、反選
當反選按鈕被點擊時，遍歷復選框，將選擇狀態(tài)全部置反，然后判斷狀態(tài)是否為全選文章來源地址http://www.zghlxwxcb.cn/news/detail-412506.html
// 點擊“反選”，所有復選框狀態(tài)取反
ReverseCheck.onclick = function(){
for(var i = 0; i < checks.length; i++){
checks[i].checked = !checks[i].checked;
}
// 若點擊反選時，全選框為選中狀態(tài)，則取消選中
if(checkAll.checked){
checkAll.checked = false;
}
// 模擬列表點擊事件，若反選后，復選框全部選中，則選中全選框，更改文字
dd.click();
}
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>復選框（checkbox）全選/全不選/反選</title>
<style>
body,
dl,
dt,
dd,
p {
margin: 0;
padding: 0;
}
body {
font-family: Tahoma;
font-size: 12px;
}
label,
input,
a {
vertical-align: middle;
}
label {
padding: 0 10px 0 5px;
}
a {
color: #09f;
text-decoration: none;
}
a:hover {
color: red;
}
dl {
width: 120px;
margin: 10px auto;
padding: 10px 5px;
border: 1px solid #666;
border-radius: 5px;
background: #fafafa;
}
dt {
padding-bottom: 10px;
border-bottom: 1px solid #666;
}
dt label {
font-weight: 700;
}
p{
text-align: center;
}
dd > p {
margin-top: 10px;
text-align: left;
}
</style>
</head>
<body>
<dl>
<dt>
<input type="checkbox" id="checkAll" />
<label>全選</label>
<a href="javascript:;">反選</a>
</dt>
<dd>
<p>
<input type="checkbox" name="item" value="one"/>
<label>one</label>
</p>
<p>
<input type="checkbox" name="item" value="two"/>
<label>two</label>
</p>
<p>
<input type="checkbox" name="item" value="three"/>
<label>three</label>
</p>
<p>
<input type="checkbox" name="item" value="four"/>
<label>four</label>
</p>
<p>
<input type="checkbox" name="item" value="five"/>
<label>five</label>
</p>
<p>
<input type="checkbox" name="item" value="six"/>
<label>six</label>
</p>
<p>
<input type="checkbox" name="item" value="seven"/>
<label>seven</label>
</p>
<p>
<input type="checkbox" name="item" value="eight"/>
<label>eight</label>
</p>
<p>
<input type="checkbox" name="item" value="nine"/>
<label>nine</label>
</p>
<p>
<input type="checkbox" name="item" value="ten"/>
<label>ten</label>
</p>
</dd>
</dl>
<p>您所選擇的內容包括：<span id="check_text"></span></p><br>
<p>
1、切換全選/全不選文字；
<br />
<br />
2、根據(jù)選中個數(shù)更新全選框狀態(tài)；
</p>
</body>
<script>
// 全選input勾選框
var checkAll = document.getElementById("checkAll");
// 復選框組
var checks = document.querySelectorAll("dd > p > input");
// 選擇列表
var dd = document.querySelector("dd");
// 反選
var ReverseCheck = document.querySelector("dl > dt > a")
// 顯示選擇內容的文字
var checkText = document.getElementById("check_text");
// 定義選擇內容的數(shù)組
var checkValues = [];
// 檢查列表復選框是否全部勾選
function isCheckAll(){
for(var i = 0; i < checks.length; i++){
if(!checks[i].checked){
return false;
}
}
return true;
}
// 根據(jù)全選框狀態(tài)改變文字
function changeText(){
// 如果全選框是勾選的狀態(tài)，提示文字變?yōu)椤叭贿x”
if(checkAll.checked){
document.querySelector("dl>dt>label").innerHTML = "全不選";
}else{
document.querySelector("dl>dt>label").innerHTML = "全選";
}
}
// 根據(jù)復選框組勾選狀態(tài)，獲取當前已選擇的值并渲染至頁面
function getValues(){
// 數(shù)組置空
checkValues=[];
// 依次檢查是否勾選，將勾選的內容放進數(shù)據(jù)
for(var i = 0; i < checks.length; i++){
if(checks[i].checked){
checkValues.push(checks[i].value);
}
}
// 將選擇的數(shù)組中的內容渲染至頁面
checkText.innerText = JSON.stringify(checkValues);
checkText.style.color = "#09f"
}
// 列表被點擊
dd.onclick = function(){
// 檢查是否已勾選所有復選框，更改全選框狀態(tài)
if(isCheckAll()){
checkAll.checked = "true";
}else{
checkAll.checked = false;
}
// 根據(jù)全選框狀態(tài)改變文字
changeText();
// 獲取當前所選擇的內容并渲染至頁面
getValues();
}
// 全選框被點擊
checkAll.onclick = function(){
// 所有復選框的狀態(tài)跟全選框的狀態(tài)保持一致
for(var i = 0; i < checks.length; i++){
checks[i].checked = checkAll.checked;
}
// 根據(jù)全選框狀態(tài)改變文字
changeText();
// 獲取當前所選擇的內容并渲染至頁面
getValues();
}
// 點擊“反選”，所有復選框狀態(tài)取反
ReverseCheck.onclick = function(){
for(var i = 0; i < checks.length; i++){
checks[i].checked = !checks[i].checked;
}
// 若點擊反選時，全選框為選中狀態(tài)，則取消選中
if(checkAll.checked){
checkAll.checked = false;
}
// 若反選后，復選框全部選中，則選中全選框，更改文字
dd.click();
}
</script>
</html>
到了這里，關于原生js實現(xiàn)復選框（全選/全不選/反選）效果【含完整代碼】的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
