Javascript实现复选框(全选反选功能)

在一个项目开发中我们经常见到页面会有复选框的全选和反选功能，这样我们才能够进行下一步的批量删除或者实现其他的功能，那我们应该怎样去实现这样的一个功能呢？其实想要实现复选框的全选和反选功能很简单只要得到复选框的集合判断一下就可以了。

代码实现如下:

Java代码

<body>
<div>
<input type="checkbox" name="cxb" value="游戏" />游戏
<input type="checkbox" name="cxb" value="吃饭" />吃饭
<input type="checkbox" name="cxb" value="唱歌" />唱歌
<input type="checkbox" name="cxb" value="跳舞" />跳舞
<input type="checkbox" name="cxb" value="休息" />休息
<input type="checkbox" name="cxb" value="学习" />学习
<input type="button" value="全选" οnclick="select1(1)"/>//注意select是关键字不能写
<input type="button" value="反选" οnclick="select1(-1)"/>
<input type="button" value="取消" οnclick="select1(0)"/>
</div>
</body>
<script type="text/javascript">
function select1(oper){
//alert("11");
var arr=document.getElementsByName("cxb");//得到集合
for(var i=0;i<arr.length;i++){
switch(oper){//没有break就继续执行知道遇到break跳出
case 0:
case 1:
arr[i].checked=oper;
break;
case -1:
arr[i].checked=!arr[i].checked;
break;
}
}
}
</script>

转载于:https://blog.51cto.com/longmanfei/516166

Javascript实现复选框(全选反选功能)相关推荐

JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
html复选框全选怎么实现,js html css实现复选框全选与反选
本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 html+css+js实现复选框全选与反选 table,tr,td { border:1px solid red; } fu ...
react实现全选和反选_react实现复选框全选和反选组件效果
本文实例为大家分享了react实现复选框全选和反选组件的具体代码,供大家参考,具体内容如下运行效果图如下: 代码: import React, { Component } from 'react'; ...
自制jQuery 复选框全选与反选插件
(function ($) { //复选框全选 $.fn.checkAll = function (options) { var defaults = { chName:"checkName ...
复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选
复选框全选与全不选效果逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...
jQuery中的几个案例：隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
html 怎么整体全选功能,html复选框全选按钮
如何用html做复选框全选中和全不选中 html中实现单击单击一个按钮实现全部选中,在点击一 function selectAllDels() { var allCheckBoxs = documen ...
Jquery 复选框全选与反选点击执行一次然后失效解决方案
Jquery 复选框全选与反选点击执行一次然后失效解决方案参考文章: (1)Jquery 复选框全选与反选点击执行一次然后失效解决方案 (2)https://www.cnblogs.com/feng ...
复选框全选以及获取所有选中的值
复选框全选以及获取所有选中的值总结一下 jsp中获取数据 <%Map<String,List> map = (Map<String,List>)Function ...
小程序实现复选框全选和取消全选
页面逻辑是,在小程序复选框列表页面上单独放一个复选框用于全选(设置class为position: fixed;即可固定在页面上),当点击全选时,页面所有复选框都会勾上,再次点击后页面所有复选框的打√都 ...

Javascript实现复选框(全选反选功能)

Javascript实现复选框(全选反选功能)相关推荐

最新文章

热门文章