javascript實現(xiàn)簡單的全選和反選功能
更新時間：2016年01月05日 16:51:26 作者：Cakty、Riven
這篇文章主要介紹了javascript實現(xiàn)簡單的全選和反選功能的相關(guān)資料,需要的朋友可以參考下
本文實例講解了javascript實現(xiàn)簡單的全選和反選功能的詳細代碼，分享給大家供大家參考，具體內(nèi)容如下
效果圖：
具體代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全選反選</title>
</head>
<body>
<input type="button" value="全選" id="all">
<input type="button" value="反選" id="reverse">
<input type="checkbox" id="flagCheck">
<ul id="checkboxList">
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
</ul>
<p>
布爾屬性，只要name即可，值可為空
checked,selected,readonly,disabled....
</p>
<script type="text/javascript">
//1.找節(jié)點
var allBtn = document.querySelectorAll("#all")[0];
var reverseBtn = document.querySelector("#reverse");
var flagCheck = document.getElementById("flagCheck");
var checkList = document.querySelectorAll("#checkboxList input");
function checkAll() {
for(var j = 0; j < checkList.length; j++) {
if(!checkList[j].checked) {
break;
}
}
if(j == checkList.length) {
// alert("全部為真")
flagCheck.checked = true;
}else {
// alert("至少一個不為真");
flagCheck.checked = false;
}
}
//2.加事件
//全選
allBtn.onclick = function() {
if(flagCheck.checked) {
flagCheck.checked = false;
for(var i = 0; i < checkList.length; i++) {
checkList[i].checked = false;
}
}else {
flagCheck.checked = true;
for(var i = 0; i < checkList.length; i++) {
checkList[i].checked = true;
}
}
}
//反選
reverseBtn.onclick = function() {
for(var i = 0; i < checkList.length; i++) {
if(checkList[i].checked) {
checkList[i].checked = false;
}else {
checkList[i].checked = true;
}
}
//執(zhí)行檢查所有checkList是否被選上了
checkAll();
}
for(var i = 0; i < checkList.length; i++) {
checkList[i].onclick = checkAll;
}
</script>
</body>
</html>
希望本文所述對大家學習javascript程序設(shè)計有所幫助。
相關(guān)文章
發(fā)現(xiàn)為本文起一個合適的標題還不是那么容易，呵呵，所以在此先說明下本文的兩個目的.2009-11-11
JavaScript如何將數(shù)據(jù)處理成樹形結(jié)構(gòu)
這篇文章主要介紹了JavaScript如何將數(shù)據(jù)處理成樹形結(jié)構(gòu)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細介紹了swiper Scrollbar滾動條組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
理解與使用JavaScript中的回調(diào)函數(shù)
這篇文章主要介紹了JavaScript中的回調(diào)函數(shù)，想詳細了解回調(diào)函數(shù)的同學，一定要看一下2021-04-04
本文主要介紹了分別使用javascript，jquery，css實現(xiàn)瀑布流布局的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
所見即所得的富文本編輯器bootstrap-wysiwyg使用方法詳解
這篇文章主要為大家分享一款所見即所得的富文本編輯器bootstrap-wysiwyg，并詳細告訴大家文本編輯器bootstrap-wysiwyg的使用方法，感興趣的小伙伴們可以參考一下2016-05-05
用最通俗易懂的代碼幫助新手理解javascript閉包 推薦
我同樣也是個javascript新手，怎么說呢，先學的jquery，精通之后發(fā)現(xiàn)了javascript的重要性，再回過頭來學javascript面向?qū)ο缶幊?/div> 2012-03-03
這篇文章主要介紹了Smartour 讓網(wǎng)頁導覽變得更簡單(推薦)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
JS如何實現(xiàn)基于websocket的多端橋接平臺
我們在調(diào)試過程使用的工具有：modheader,postman等，但這些工具都會存在的問題：缺少客戶端里相應(yīng)的設(shè)備信息；即使將cookie信息復制出來，也是存在過期的問題；多個設(shè)備之間切換時不方便；針對這些存在的問題，我基于websocket雙向通信的特點，實現(xiàn)了多端橋接管理平臺2021-05-05
這篇文章主要介紹了談?wù)凧S中常遇到的瀏覽器兼容問題和解決方法 ，有些代碼在某些瀏覽器的某些版本中表現(xiàn)出不兼容，影響頁面的體驗；這時就需要處理了這些兼容問題，讓頁面在多個版本的瀏覽器上運行良好。2016-12-12最新評論