js实现checkbox多选和反选

旧城等待， 2022-08-20 08:27 259阅读 0赞

<input type="checkbox" id="controlAll" οnclick="selectAll()"/>   //控制多选的复选框  
  
<div>  
<input name="select\_id" type="checkbox" value="1" /><br />  
<input name="select\_id" type="checkbox" value="2" /><br / >  
 <input name="select\_id" type="checkbox" value="3" /><br / >  
 <input name="select\_id" type="checkbox" value="4" /><br / >  
 <input name="select\_id" type="checkbox" value="5" /><br / >  
 <input name="select\_id" type="checkbox" value="6" /><br / >          
<div>  
<script type="text/javascript">   
function selectAll()\{

var checklist = document.getElementsByName("select\_id");    //获取所有name为select\_id的input标签数组

if(document.getElementById("controlAll").checked)\{   //判断总选按钮是否选中

//alert(checklist.length);

for(var i=0;i<checklist.length;i++)\{

checklist\[i\].checked = 1;

\}

\}else\{      //如果总选按钮没有选中

for(var j=0;j<checklist.length;j++)\{

checklist\[j\].checked = 0;

\}

\}

\}

</script>

效果如图

![Center][]

![Center 1][]

[Center]: /images/20220731/4e9d3f3445274e6d917a863e25a1b25b.png
[Center 1]: /images/20220731/909a824ef349444cb5a92d0dd797ef4b.png

发表评论取消回复

表情：

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

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

相关阅读

相关用 JS（JavaScript ）实现多选、全选、反选

JS小例题学习内容：需求总结：学习内容：需求用 JavaScript 实现全选、反选、多选实现代码 <!D

╰+哭是因爲堅強的太久メ/ 2023年01月16日 03:29/ 0 赞/ 221 阅读

相关 js实现全选、多选、反选（JQuery 实现）

jQuery 实现全选、多选、反选学习内容：需求总结：学习内容：需求 jQuery 实现全选、多选、反选实现代码

绝地灬酷狼/ 2022年10月16日 11:23/ 0 赞/ 214 阅读

相关 ElementUI el-checkbox实现全选反选单选

一、概述先来看一下效果图 ![8dbcd72c55ff052910facb707005eab9.png][] 需求： 1. 每一种类型，可以全选，反选(一个都不选

痛定思痛。/ 2022年10月09日 02:35/ 0 赞/ 270 阅读

相关 js 实现复选框全选和反选

//全选 function chooseAll() \{ var selects = document.getElementsByName('id

深碍√TFBOYSˉ_/ 2022年08月26日 11:24/ 0 赞/ 249 阅读

相关 js实现checkbox多选和反选

<input type="checkbox" id="controlAll" οnclick="selectAll()"/> //控制多选的复选框 <div>

旧城等待，/ 2022年08月20日 08:27/ 0 赞/ 260 阅读

相关 jquery checkbox全选/反选

使用jquery全选和反选多选框 $('.ck').each(function(){ if($(this).is(':checked')){

青旅半醒/ 2022年06月10日 08:13/ 0 赞/ 299 阅读

相关 js实现全选/反选和单选

描述一般用在后台管理数据，以及购物车批量操作等多种情况 ![这里写图片描述][SouthEast] JS代码： <script type="te

浅浅的花香味﹌/ 2022年06月08日 09:48/ 0 赞/ 306 阅读

相关 js 实现复选框全选和反选

//全选 function chooseAll() \{ var selects = document.getElementsByName('id

蔚落/ 2022年05月11日 13:42/ 0 赞/ 276 阅读

相关 JQuery实现checkbox全选和反选

function selectAll(){ //id=all是全选/反选的checkbox，判断是选中还是没选中 var isChecked=$

今天药忘吃喽~/ 2022年05月08日 11:26/ 0 赞/ 231 阅读

相关 input checkbox 全选和反选

全选和反选(仅供参考) 注:请忽略我的排版O(∩\_∩)O哈哈~ <!DOCTYPE html> <html> <head> <me

Myth丶恋晨/ 2022年02月01日 08:25/ 0 赞/ 258 阅读