全选、全不选"/>
Javascript 04：全选、全不选
1、 全选、全不选、反选（单选）
<body><form action=""><p><input type="checkbox" id="" >西瓜</p><p><input type="checkbox" id="">香蕉</p><p><input type="checkbox" id="">橙子</p><p><input type="checkbox" id="">葡萄</p></form><button onclick="getAll(0)">全选</button><button onclick="getAll(1)">全不选</button><button onclick="getAll(2)">反选</button><script><script>// 逻辑 选中的三个形式 1：用户点击 2：在标签上添加checked 3：js中 checked=truelet input=document.getElementsByTagName("input");let btn=document.getElementsByTagName("button");//全选btn[0].onclick=function(){for(let i=0;i<input.length;i++){input[i].checked=true;}}//全选btn[1].onclick=function(){for(let i=0;i<input.length;i++){input[i].checked=false;}}//反选btn[2].onclick=function(){for(let i=0;i<input.length;i++){input[i].checked=!input[i].checked;}}</script>
</body>2、 封装成方法
<body><form action=""><p><input type="checkbox" id="" >西瓜</p><p><input type="checkbox" id="">香蕉</p><p><input type="checkbox" id="">橙子</p><p><input type="checkbox" id="">葡萄</p></form><button onclick="getAll(0)">全选</button><button onclick="getAll(1)">全不选</button><button onclick="getAll(2)">反选</button><script>
// 逻辑 选中的三个形式 1：用户点击 2：在标签上添加checked 3：js中 checked=truelet input=document.getElementsByTagName("input");let btn=document.getElementsByTagName("button");//封装为函数（方法）function getAll(num){for(let i=0;i<input.length;i++){if(num==0){input[i].checked=true}if(num==1){input[i].checked=false;}if(num==2){input[i].checked=!input[i].checked;}}} </script></body>
更多推荐
Javascript 04：全选、全不选
发布评论