一个挺 使用的 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. js img转换base64

    方法一:canvas <script type="text/javascript"> function getBase64Image(img) { var canvas ...

  2. golang在gitlab中的工作流

    在敏捷开发的时代, 快速的编码, code review, 测试, 部署, 是提升程序员效率的关键. 同时在基础工具完备的如今, 我们甚至无需过多的操作就可以轻松实现上述步骤, 本文就以gitlab为 ...

  3. Mac 10.12安装SecureCRT

    下载: (链接: https://pan.baidu.com/s/1eSNBoFC 密码: sztc) 安装参考: http://www.cnblogs.com/EasonJim/p/7568734. ...

  4. Sublime Text 3新建工程

    1. 创建工程 Project > Add Folder to Project 这时在sidebar中将出现刚刚添加的文件目录,如果还需要添加其他目录,则重复这一操作即可. 2. 保存工程 Pr ...

  5. WCF系列教程之WCF服务宿主与WCF服务部署

    本文参考自http://www.cnblogs.com/wangweimutou/p/4377062.html,纯属读书笔记,加深记忆. 一.简介 任何一个程序的运行都需要依赖一个确定的进程中,WCF ...

  6. cocos开发环境搭建

    本文大部分内容取材自这篇文章:http://cn.cocos2d-x.org/tutorial/show?id=1448 公欲善其事,必先利其器. 想学习cocos?啥都别说了,先搭环境吧. 需要做的 ...

  7. ubuntu 16.04安装好后没声音的解决方法

    刚安装好Ubuntu16.04 后没声音,找了好多方法都不行,看到网上说通过安装pavucontrol和alsamixer调节解决,最后无意发现一个方法,总算是可以用了,在此记录一下.可能有的可以解决 ...

  8. 何为cookie?

    何为cookie HTTP Cookie(也叫Web Cookie或浏览器Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上 ...

  9. STL 排序（转载）

    这篇文章关于STL中的排序写的虽不深入,但是还是挺好的. 1.sort sort有两种形式,第一种形式有两个迭代器参数,构成一个前开后闭的区间,按照元素的 less 关系排序:第二种形式多加一个指定排 ...

  10. APU （美国AMD公司研发的加速处理器）

    APU(Accelerated Processing Unit)中文名字叫加速处理器,是AMD“融聚未来”理念的产品,它第一次将中央处理器和独显核心做在一个晶片上,它同时具有高性能处理器和最新独立显卡 ...