一个挺 使用的 js 代码片段，  判断  复选框全选、全不选、反选、必选一个

记录下， 搬来的

思路：

修改数据的 选中与否状态， 拿到所有的输入框，看是否有选中的状态

<html>

    <head>

        <title>

            复选框全选、全不选、反选、必选一个

        </title>

        <meta http-equiv="content-type" content="text/html;charset=GBK"/>

        <script language="javascript">

            //表单验证

            function check(){

                var ids = document.getElementsByName("ids");

                var flag = false ;

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

                    if(ids[i].checked){

                        flag = true ;

                        break ;

                    }

                }

                if(!flag){

                    alert("请最少选择一项！");

                    return false ;

                }

            }

            //全选

            function iselect(){ //其中函数字不能为select 其为JS保留字

                var ids = document.getElementsByName("ids");

                var all = document.getElementById("all");

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

                    ids[i].checked=all.checked;

                }

            }

            //全选

            function selectAll(){

                var ids = document.getElementsByName("ids");

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

                    ids[i].checked=true;

                }

            }

            //全不

            function selectNone(){

                var ids = document.getElementsByName("ids");

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

                    ids[i].checked=false;

                }

            }

            //反选

            function selectInvert(){

                var ids = document.getElementsByName("ids");

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

                    if(ids[i].checked)

                        ids[i].checked=false ;

                    else

                        ids[i].checked=true ;

                }

            }

        </script>

    </head>

    <body>

        <form action="#" onsubmit="return check();">

        <table border="0">

            <tr><td><input type="checkbox" id="all" onclick="iselect();"></td></tr>

            <tr><td><input type="checkbox" name="ids">音乐</td></tr>

            <tr><td><input type="checkbox" name="ids">短信</td></tr>

            <tr><td><input type="checkbox" name="ids">图片</td></tr>

            <tr><td><input type="checkbox" name="ids">电子书</td></tr>

            <tr><td><input type="checkbox" name="ids">铃声</td></tr>

            <tr><td><input type="checkbox" name="ids">漫画</td></tr>

            <tr><td><input type="checkbox" name="ids">游戏</td></tr>

            <tr><td><input type="checkbox" name="ids">杂志</td></tr>

            <tr><td><input type="checkbox" name="ids">新闻</td></tr>

            <tr>

                <td>

                    <a href="#" onclick="selectAll();">全选</a>&nbsp;

                    <a href="#" onclick="selectNone();">全不</a>&nbsp;

                    <a href="#" onclick="selectInvert();">反选</a>

                </td>

            </tr>

            <tr><td><input type="submit" value="提交"></td></tr>

        </table>

        </form>

    </body>

</html>

<html>
<head>
<title>
复选框全选、全不选、反选、必选一个
</title>
<meta http-equiv="content-type" content="text/html;charset=GBK"/>
<script language="javascript">
//表单验证
function check(){
var ids = document.getElementsByName("ids");
var flag = false ;
for(var i=0;i<ids.length;i++){
if(ids[i].checked){
flag = true ;
break ;
}
}
if(!flag){
alert("请最少选择一项！");
return false ;
}
}
//全选
function iselect(){ //其中函数字不能为select 其为JS保留字
var ids = document.getElementsByName("ids");
var all = document.getElementById("all");
for(var i=0;i<ids.length;i++){
ids[i].checked=all.checked;
}
}
//全选
function selectAll(){
var ids = document.getElementsByName("ids");
for(var i=0;i<ids.length;i++){
ids[i].checked=true;
}
}
//全不
function selectNone(){
var ids = document.getElementsByName("ids");
for(var i=0;i<ids.length;i++){
ids[i].checked=false;
}
}
//反选
function selectInvert(){
var ids = document.getElementsByName("ids");
for(var i=0;i<ids.length;i++){
if(ids[i].checked)
ids[i].checked=false ;
else
ids[i].checked=true ;
}
}
</script>
</head>
<body>
<form action="#" onsubmit="return check();">
<table border="0">
<tr><td><input type="checkbox" id="all" onclick="iselect();"></td></tr>
<tr><td><input type="checkbox" name="ids">音乐</td></tr>
<tr><td><input type="checkbox" name="ids">短信</td></tr>
<tr><td><input type="checkbox" name="ids">图片</td></tr>
<tr><td><input type="checkbox" name="ids">电子书</td></tr>
<tr><td><input type="checkbox" name="ids">铃声</td></tr>
<tr><td><input type="checkbox" name="ids">漫画</td></tr>
<tr><td><input type="checkbox" name="ids">游戏</td></tr>
<tr><td><input type="checkbox" name="ids">杂志</td></tr>
<tr><td><input type="checkbox" name="ids">新闻</td></tr>
<tr>
<td>
<a href="#" onclick="selectAll();">全选</a>&nbsp;
<a href="#" onclick="selectNone();">全不</a>&nbsp;
<a href="#" onclick="selectInvert();">反选</a>
</td>
</tr>
<tr><td><input type="submit" value="提交"></td></tr>
</table>
</form>
</body>
</html>

js 判断 复选框全选、全不选、反选、必选一个的更多相关文章

  1. js 全选选框与取消全选代码

    设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...

  2. 实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能

    首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. public partial class Form1 : Form { public Form1() { Initia ...

  3. element-ui 里面el-checkbox多选框，实现全选单选

    data里面定义了 data:[],        actionids:[],//选择的那个actionid        num1:0,//没选择的计数        num2:0,//选中的计数  ...

  4. checkbox设置复选框的只读效果不让用户勾选

    在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...

  5. [oldboy-django][2深入django]老师管理 -- form表单如何生成多选框标签，多选框的默认值显示，以及多选框数据插入到数据库，多选框数据更改到数据库

    1 form表单如何生成多选框(包含了多选框可选择内容) - Form设置班级输入框为 select多选 - 多选 class TeacherForm(Form): name = fields.Cha ...

  6. jquery--获取多选框的值、获取下拉多选框的值

    获取多选框的值 var packageCodeList=new Array(); $('#server_id:checked').each(function(){ packageCodeList.pu ...

  7. layui 复选框checkbox 实现全选全选

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

  8. JQuery、js判断复选框是否选中状态

    JQuery: var $isChecked = $("#id").is(":checked"); alert($isChecked); JS: var $id ...

  9. jquery、js判断复选框是否选中

    js: if (document.getElementById("checkboxID").checked) { alert("checkobx is checked&q ...

随机推荐

  1. [JZOJ6075]【GDOI2019模拟2019.3.20】桥【DP】【线段树】

    Description N,M<=100000,S,T<=1e9 Solution 首先可以感受一下,我们把街道看成一行,那么只有给出的2n个点的纵坐标是有用的,于是我们可以将坐标离散化至 ...

  2. HDU - 6133 启发式合并

    题意:给出一棵树共\(n\)个顶点,每个顶点有一个权值\(val_i\),你需要对每个节点统计一个最优解 每个节点的解按照一定规则产生:取出该节点的子树下所有的顶点,把顶点任意排序成一个序列,设为\( ...

  3. System Verilog基础（二）

    这一篇笔记主要记录Procedural,Process,Task and function,Interface和Communication中值得注意的点. 1.Procedural 写testbenc ...

  4. 成倍提高服务器的负载能力：浅谈Jexus的ASP.NET前置缓存技术

    一.什么是“ASP.NET前置缓存”     ASP.NET前置缓存,是Jexus特色功能之一,是指Jexus把开发者指定的ASP.NET网页某一时刻的内容,缓存到专用的高速缓冲区中,在指定的时间内, ...

  5. 如何修改 linux ubuntu 默认语言

    最近学习linux中,由于安装时选择了简体中文作为默认语言,时常出现乱码现象,所以决定将默认语言改回en_US. 但是在网上找了一些教程,发觉不一定都能实现.现总结如下: (1)对于大部分linux系 ...

  6. Git克隆与更新代码

    一.克隆项目 除了可以向GitHub上提交项目外,更多的时候是我们到上面克隆(下载)优秀的开源项目来用,当然也可以将使用过程中发现的bug,通过建立分支的方式提交给项目的原作者. 现在的场景是在家将项 ...

  7. Group by、having、order by、Distinct 使用注意事项

    直奔主题,如下SQL语句 SELECT COUNT(*) AS COUNT,REQUEST,METHOD FROM REQUESTMETH GROUP BY REQUEST,METHOD HAVING ...

  8. 相片Exif协议

    今天看他们安卓在做项目遇到一个要让旋转拍摄的相片竖屏方向显示 ,网上搜了下找到了安卓的一个博客,看了下想着既然安卓有ios也应该会有,果然不出所料,确实是有.其实他们都是遵循Exif协议,百度百科也有 ...

  9. 封装简单的API——微信小程序

    前几天自己琢磨微信小程序的基本开发,里边用到的技术包括WebAPI,也就是方法的封装. 当然也可以用ASP.NET MVC WCF来写接口.更简单应该就是 WinForm 简单易部署. 这里用的是 2 ...

  10. java中equal和==的比较

    equals 方法是 java.lang.Object 类的方法. 有两种用法说明: (1)对于字符串变量来说,使用“==”和“equals()”方法比较字符串时,其比较方法不同. “==”比较两个变 ...