本文實例為大家分享了js全選操作的具體代碼，供大家參考，具體內容如下
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style>*{margin:0;padding:0;}ul{list-style:none;}#content{width:300px;border:1px solid #ccc;margin:20px auto;}#content ul{width:300px;}#content ul li,#content div{width:300px;height:50px;line-height:50px;border-bottom:1px dotted #ccc;text-indent:20px;}#content ul li:nth-child(odd) {background:#f1f1f1;}#content ul li.active,#content ul li:hover{background:#99FFCC;}</style><script>window.onload = function () { var oDiv = document.getElementById('content'); var checkAll = document.getElementById('checkAll'); var aLi = oDiv.getElementsByTagName('li'); var aInput = oDiv.getElementsByTagName('input'); for ( var i = 0; i < aInput.length; i++ ) { aInput[i].index = i; aInput[i].onclick = function () { aLi[this.index].className = this.checked ? 'active' : ''; } } checkAll.onclick = function () { for ( var i = 0; i < aInput.length; i++ ) { if(!aInput[i].checked) aInput[i].checked = true; aLi[i].className = 'active'; } }}</script></head><body><div id="content"> <ul> <li> <input type="checkbox"/> <span>私奔</span> <span>梁博</span> </li> <li> <input type="checkbox"/> <span>北京</span> <span>杜甫</span> </li> <li> <input type="checkbox"/> <span>花人</span> <span>李白</span> </li> <li> <input type="checkbox"/> <span>神話</span> <span>光良</span> </li> <li> <input type="checkbox"/> <span>神話</span> <span>光良</span> </li> <li> <input type="checkbox"/> <span>神話</span> <span>光良</span> </li> <li> <input type="checkbox"/> <span>神話</span> <span>光良</span> </li> <li> <input type="checkbox"/> <span>神話</span> <span>光良</span> </li> <li> <input type="checkbox"/> <span>神話</span> <span>光良</span> </li> </ul> <div> <input id="checkAll" type="checkbox" />全選 </div></div></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
