首頁  >  文章  >  web前端  >  詳解JavaScript實現全選和反選的功能(附程式碼範例)

詳解JavaScript實現全選和反選的功能(附程式碼範例)

藏色散人
藏色散人轉載
2022-08-06 13:48:022057瀏覽

這篇文章跟大家介紹原生js是怎麼實現全選和反選的功能的,希望對需要的朋友有幫助!

想法:首先我們要取得節點

		遍历每个节点 获取到checked的属性
		然后我们通过改变checked的属性改变选中的状态
		全选的时候我们让他们都为true 
		反选的时候我们使用!达到效果

詳解JavaScript實現全選和反選的功能(附程式碼範例)

這次使用到的知識點有:

document.getElementsByName(‘name属性’):选中所有的name为name属性的的元素节点对象
document.getElementById('id名称'): 通过id名称获取一个元素节点对象
onclick:鼠标点击事件

html部分:

<input> 全选
<input>足球
<input>篮球
<input>羽毛球
<input>反选

js部分

var items = document.getElementsByName('items');
var quan = document.getElementById('quan');
var fan = document.getElementById('fan');

function fan1(){
    var index = 0;
    for(var i =0;i<items.length quan.onclick="function(){" fan.onclick><p><img src="https://img.php.cn/upload/article/000/000/020/a37a80b3c1cd10f0bf97587d1908c868-1.png" alt="詳解JavaScript實現全選和反選的功能(附程式碼範例)"></p>##相關推薦:【 <p>JavaScript影片教學<a href="https://www.php.cn/course/list/17.html" target="_blank">】</a></p>
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-22a2fefd3b.css" rel="stylesheet"></items.length>

以上是詳解JavaScript實現全選和反選的功能(附程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除