JS全选取消全选

编程入门 行业动态 更新时间:2024-10-09 02:29:10

JS<a href=https://www.elefans.com/category/jswz/34/1768531.html style=全选取消全选"/>

JS全选取消全选

点击全选复选框,然后所有的复选框都选中,全选变成取消全选,点击取消全选复选框,然后所有的复选框都取消选中,今天我们用HTML中的JS代码实现
下面是代码:

<!DOCTYPE html>`在这里插入代码片`
<html>
<head><title>全选</title><script type="text/javascript">function my(){var is=document.getElementById('box');//获取全选的复选框var em=is.checked;//判断复选框的选中状态  var iss=document.getElementsByName('box1');//下面所有的复选框var ass=document.getElementById('as');if(em){//如果全选复选框是false 则执行下面代码for(var i=0;i<iss.length;i++){ //循环下面所有复选框,将所有复选框都选中iss[i].checked=true;  }ass.innerHTML='取消全选';//选中后将SPAN中的内容改为取消全选}else{for(var i=0;i<iss.length;i++){iss[i].checked=false;}ass.innerHTML='全选';}}</script>
</head>
<body><input type="checkbox" id="box" οnclick="my()"><span id="as">全选</span><input type="checkbox" name="box1">学生<input type="checkbox" name="box1">18<input type="checkbox" name="box1">男<input type="checkbox" name="box1">张三
</body>
</html>

结果是:


更多推荐

JS全选取消全选

本文发布于:2024-02-11 07:03:46,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1679744.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:全选   JS

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!