當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JS实现全选、反选、不选
生活随笔
收集整理的這篇文章主要介紹了
JS实现全选、反选、不选
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?JS實現(xiàn)全選、反選、不選
?效果圖:
?
?代碼如下,復(fù)制即可使用:
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){//全局加載var oi = document.getElementById("oi");//全選按鈕獲取節(jié)點var po = document.getElementById("po");//單選按鈕獲取節(jié)點var yu = document.getElementById("yu");//反選按鈕獲取節(jié)點var inp = document.getElementsByTagName("input");oi.onclick = function(){//全選按鈕加載點擊事件for(var i = 0;i < inp.length;i++){//全選按鈕循環(huán) 小于按鈕和的全選中 按鈕個數(shù)和為i inp[i].checked = true;//按紐的屬性值小于按鈕個數(shù)是=(真)true }}po.onclick = function(){for(var i = 0;i < inp.length;i++){inp[i].checked = false;}}yu.onclick = function(){for(var i= 0;i < inp.length;i++){if( inp[i].checked == true){inp[i].checked = false;}else {inp[i].checked = true;}}}}</script> </head> <body><input type="checkbox" value="足球" name="1" /><br/><input type="checkbox" value="足球" name="2" /><br/><input type="checkbox" value="足球" name="3" /><br/><input type="checkbox" value="足球" name="4"/><br/><input type="checkbox" value="足球" name="5" /><br/><input type="checkbox" value="足球" name="6" /><br/><input type="checkbox" value="足球" name="7" /><br/><input type="checkbox" value="足球" name="8" /><br/><input type="checkbox" value="足球" name="9" /><br/><input type="checkbox" value="足球" name="0" /><br/><input type="button" value="全選" id="oi"/><input type="button" value="不全選" id="po"/><input type="button" value="反選" id="yu"/> </body></html>
?如有錯誤,歡迎聯(lián)系我改正,非常感謝!!!
轉(zhuǎn)載于:https://www.cnblogs.com/yidaixiaohui/p/8447111.html
總結(jié)
以上是生活随笔為你收集整理的JS实现全选、反选、不选的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 博客新地址
- 下一篇: javascript中的replace方