一个挺 使用的 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. 基于iTop4412的FM收音机系统设计(二)

    说明:第一版架构为:APP+JNI(NDK)+Driver(linux),优点是开发简单,周期短,也作为自己的毕业设计 现在更新第二版,FM服务完全植入Android系统中,成为系统服务,架构为:AP ...

  2. 响应式Web设计－一种优雅的掌上展现

    入门 flat - style (too many ad.) writeshell

  3. mongoengine在python中的使用

    # /usr/bin/python # encoding: utf-8 # Author: masako from mongoengine import * host ='127.0.0.1' por ...

  4. 【HADR】How to reestablish HADR from scratch after a failure on Standby

    转载 http://www-01.ibm.com/support/docview.wss?uid=swg21514783 Cause  Have a HADR pair with Primary on ...

  5. (转)一次棘手的rootvg更换硬盘处理过程

    一次棘手的rootvg更换硬盘处理过程 原文:http://www.talkwithtrend.com/Article/160857 事件起因 下午接到现场工程师电话,一台双系统抽屉IBM P570一 ...

  6. exe4j安装及注册

    1 安装 1 下载 exe4j下载地址:http://www.ej-technologies.com/download/exe4j/files.php, 进入网址,选择需要的版本,点击下载就可以了. ...

  7. JavaScript数据结构-2.排序算法

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

  8. 深度学习（二）BP求解过程和梯度下降

    一.原理 重点:明白偏导数含义,是该函数在该点的切线,就是变化率,一定要理解变化率. 1)什么是梯度 梯度本意是一个向量(矢量),当某一函数在某点处沿着该方向的方向导数取得该点处的最大值,即函数在该点 ...

  9. hadoop 分布式安装

    一.虚拟机安装centos7需要显示IPv4地址时设置 修改ip addr 中显示ipv4 修改 ONBOOT=no 为 ONBOOT=yes, 同时需要添加HWADDR=00:0c:29:c8:b6 ...

  10. InnoDB的B+树索引使用

    何时使用索引 并不是在所有的查询条件下出现的列都需要添加索引.对于什么时候添加B+树索引,我的经验是访问表中很少一部分行时,使用B+树索引才有意义.对于性别字段.地区字段.类型字段,它们可取值的范围很 ...