一个挺 使用的 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. BZOJ AC 300祭！

  2. springboot自定义jmx对象

    在使用springboot-admin对springboot项目进行监控的时候我们发现其是具有web访问jmx对象的功能的,那它内部是怎么实现的呢. Jolokia是一个JMX-http桥梁,它提供了 ...

  3. jquery的animate关于background-position属性

    jQuery 的 animate 虽然能直接使用 CSS 的方式来进行动画,但有些属性其实是不支持的,例如:background-position. 谷歌支持 background-position- ...

  4. Django的国际化

    Django的国际化 Django基于python的gettext来实现国际化.其过程为安装gettext工具,然后再代码中调用指定方法,然后用gettext提供的程序来把代码中需要翻译的部分找出来写 ...

  5. InnoDB的分区表

    分区功能并不是在存储引擎层完成的,因此不只有InnoDB存储引擎支持分区,常见的存储引擎MyISAM.NDB等都支持.但也并不是所有的存储引擎都支持,如CSV.FEDERATED.MERGE等就不支持 ...

  6. SQL语句映射文件(1)resultMap

    SQL 映射XML 文件是所有sql语句放置的地方.需要定义一个workspace,一般定义为对应的接口类的路径.写好SQL语句映射文件后,需要在MyBAtis配置文件mappers标签中引用,例如: ...

  7. Algorithm partI 第2节课 Union−Find

    发展一个有效算法的具体(一般)过程: union-find用来解决dynamic connectivity,下面主要讲quick find和quick union及其应用和改进. 基本操作:find/ ...

  8. Java时间的使用

    JAVA处理日期时间常用方法: 1.java.util.Calendar Calendar 类是一个抽象类,它为特定瞬间与一组诸如 YEAR.MONTH.DAY_OF_MONTH.HOUR 等 日历字 ...

  9. 环境准备 Ubuntu & Docker

    目录 Ubuntu 简介 配置 Docker 简介 Docker CE 安装 参考 本文主要讲解在 Ubuntu 上安装和配置 Docker CE. Ubuntu 简介 Ubuntu(乌班图)是一个基 ...

  10. 【LeetCode题解】20_有效的括号（Valid-Parentheses）

    目录 20_有效的括号(Valid-Parentheses) 描述 解法 思路 Java 实现 Python 实现 复杂度分析 20_有效的括号(Valid-Parentheses) 描述 给定一个只 ...