js全选/全不选/反选简洁版

淩亂°似流年 2022-05-13 10:34 179阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<input type="checkbox" id="sel-all">全选/全不选
    	<input type="checkbox" id="unsel">	反选<br>
    	<label for="">兴趣：</label>
    	<div id="box">
    		<input type="checkbox">玩游戏
    		<input type="checkbox">游泳
    		<input type="checkbox">爬山
    		<input type="checkbox">读书
    		<input type="checkbox">唱歌
    	</div>
    
    	<script type="text/javascript">
    		var o= document.getElementById('box');
    		var ips=o.getElementsByTagName('input');//找到所有的兴趣
    
    		//全选/全不选事件
    		document.getElementById('sel-all').onchange=function () {
    			console.log(this.checked);
    			//遍历所有的节点
    			for(var i =0;i<ips.length;i++){
    				ips[i].checked=this.checked;
    				// if(this.checked){
    				// 	ips[i].checked=true;
    				// }else{
    				// 	ips[i].checked=false;
    				// }
    			}
    		};
    
    		//反选
    		document.getElementById('unsel').onchange=function () {
    			// console.log('chagne');
    			for(var j=0;j<ips.length;j++){
    				ips[j].checked=!ips[j].checked;//改变状态
    			}
    		};
    	</script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）

首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。

缺乏、安全感/ 2024年04月22日 22:30/ 0 赞/ 16 阅读

相关 jQuery实现全选、反选、全不选效果

jQuery实现全选、反选、全不选效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

柔光的暖阳◎/ 2022年09月18日 05:00/ 0 赞/ 190 阅读

相关 jQurey全选，反选，不全选功能实现

html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选，反选，不全选</t

╰+哭是因爲堅強的太久メ/ 2022年08月21日 10:53/ 0 赞/ 190 阅读

相关 Dom 全选全不选反选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

桃扇骨/ 2022年06月11日 00:06/ 0 赞/ 213 阅读

相关 JavaScript复选框（全选/全不选反选）

实例代码： 1 JS代码： <script type="text/javascript"> window.οnlοad=function()\{

一时失言乱红尘/ 2022年05月17日 01:46/ 0 赞/ 229 阅读

相关 js全选/全不选/反选简洁版

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

淩亂°似流年/ 2022年05月13日 10:34/ 0 赞/ 180 阅读

相关 js全选/全不选/反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

迷南。/ 2022年05月13日 10:08/ 0 赞/ 207 阅读

相关全选、反选

//全选 function selectall(_obj,_obj1,_objv,_objv1){ var fg = _obj1.value == _objv?

我就是我/ 2022年01月05日 06:11/ 0 赞/ 292 阅读

相关 javascript 复选框（checkbox）全选/全不选/反选

其实很简单，先分析一下效果分析：　　1，点击全选/全不选　　　全选文字变成全不选，同时全选按钮和所有按钮选中状态，否则，则相反　　2，点击反选按钮

た入场券/ 2021年11月19日 14:24/ 0 赞/ 505 阅读

相关全选-反选-全不选

简单易懂，上手快 $(function() \{ //全选 $("\all").click(function()

绝地灬酷狼/ 2021年10月03日 02:48/ 0 赞/ 467 阅读