js实现复选框的全选、取消全选、反选

思路很简单：

全选：将所有复选框的checked设置为true

取消全选：将所有复选框的checked设置为false

反选：将所有选中的复选框设置为false，未选中的设置为true。即将checked为true的设置为false；false的设为true

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>    <title>复选框全选、取消全选、反选</title><script type="text/javascript">/*全选/取消全选*/var oSports=document.getElementsByName("sport");var len=0;function selectAll(){if(len == oSports.length){ //当复选框都被选中的时候进行进行取消全选for(var i = 0;i < oSports.length;i++){oSports[i].checked = false; len = 0;}}else{  //当复选框没有被全选的时候，进行全选for(var i = 0;i < oSports.length;i++){oSports[i].checked = true; len++;    }}}/*反选*/function revSelect(){for(var i = 0;i < oSports.length;i++){oSports[i].checked = !oSports[i].checked; /*将复选框的checked状态设置为与之前的相反*/}}</script></head><body><input type="checkbox" name="sport">篮球<br/><input type="checkbox" name="sport">足球<br/><input type="checkbox" name="sport">羽毛球<br/><input type="checkbox" name="sport">乒乓球<br/><input type="checkbox" name="sport">网球<br/><div><input type="button" value="全选/取消全选"  id="allSelect" onclick="selectAll()"/><input type="button" value="反选"  id="revSelect" onclick="revSelect()"/></div></body>
</html>

js实现复选框的全选、取消全选、反选相关推荐

复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选
复选框全选与全不选效果逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...
多选框向后台传值，多选框的回显，对多选框的各种操作
1.多选框的回显: js:$( function(){ var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为 ...
下拉列表与多选框以及GridView中的多选框的问题
小丫头的随笔... 页面设计中有一个下拉列表(DropDownList)和多选框列表(CheckBoxList)以及一个可以提供显示的表格(GridView).当选择下拉列表中具体的值时,进行对多选框 ...
Android 切换全屏,取消全屏
切换全屏,取消全屏 /*** 切换全屏,取消全屏** @param isChecked*/ private void switchFullScreen(boolean isChecked) {if ( ...
jQuery 循环获取checkbox复选框的值，checkbox全选、全不选、反选
前端页面html <tr v-for="(log,index) in logList"><td>& ...
PyQt5 技巧篇-复选框绑定行内容，全选、清空、展示选中的内容功能实现演示，设置复选框选中，检查复选框选中状态
先看效果图,选中了几行,然后将选中的内容展示出来. 我设置两个有序序列,分别存储对应的复选框和行内容. 我的行内容是用的 label 标签. # 存储右边label组件的有序列表def get_L_b ...
复选框全部选中/全部取消
今天遇到一个问题记录一下! 问题描述: js拼接页面,存在复选框,要做一个全部选中,全部取消的操作,使用.arrt("checked","checked")取消 ...
复选框（checkbox）、多选框
1.需求分析可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分图示是一个列表加底部一段文字说明,列 ...
html5判断多选框是否选择的函数,复选框（checkbox）、多选框
1.需求分析可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分图示是一个列表加底部一段文字说明,列 ...
复选框 html 操作,HTML页面中复选框的操作方法
原标题:HTML页面中复选框的操作方法复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会见到复选的身影.接下来,是我之前写过的两个小demo,都是关于复选框的,希望会给大家带 ...

js实现复选框的全选、取消全选、反选

js实现复选框的全选、取消全选、反选相关推荐

最新文章

热门文章