一个挺 使用的 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. Hibernate查询方式&抓取策略

    Hibernate的查询方式 1.OID查询 hibernate根据对象的OID(主键)进行检索 使用get方法 Customer customer=session.get(Customer.clas ...

  2. LOJ2229. 「BJOI2014」想法（随机化）

    题目链接 https://loj.ac/problem/2229 题解 评分标准提示我们可以使用随机化算法. 首先,我们为每一道编号在 \([1, m]\) 以内的题目(这些题目也对应了 \(m\) ...

  3. 问题 I: 闪闪发光

    [提交] [状态] [命题人:外部导入] 题目描述 一所位于云南昆明的中医药本科院校--云南中医学院. 因为报考某专业的人数骤减,正面临着停招的危机. 其中有九名少女想到一条妙计——成为偶像, 只要她 ...

  4. 使用InstallUtil安装及卸载Windows服务的具体操作 Visual Studio 2012版本

    关于Visual Studio 2012中使用InstallUtil对Windows服务进行安装与卸载的文章,在MSDN中的http://msdn.microsoft.com/en-us/librar ...

  5. C# this关键字(给底层类库扩展成员方法)

    本文参考自唔愛吃蘋果的C#原始类型扩展方法—this参数修饰符,并在其基础上做了一些细节上的解释 1.this作为参数关键字的作用 使用this关键字,可以向this关键字后面的类型添加扩展方法,而无 ...

  6. 关于js语法（运算中出现无限大的问题）本身的错误的解决方案

    错误原因: 一是 JavaScript 浮点数计算的 Bug, 另一个是和计算机最终转换成二进制计算有关系 解决方案: 第一种就是利用JavaScript 的toFixed(n) 方法,直接获取N 位 ...

  7. https证书pfx 生成 pem,crt,key

    (1)将.pfx格式的证书转换为.pem文件格式:    openssl pkcs12 -in xxx.pfx -nodes -out server.pem (2)从.pem文件中导出私钥server ...

  8. C#控制台程序，运行完窗口不退出的方法

    .... static void Main(string[] args){ Console.WriteLine("运行完后不退出窗口"); Console.ReadKey();// ...

  9. Intel万兆网卡背靠背连接ping不通那点事儿

    对那些整天喊着“玩大的,玩狠的”口号的人来说,我下面要说的这点事儿,根本就不算事儿.所以,如果你正好喜欢喊口号,就不要往下看了,因为我要讲述的,你可能不感兴趣,也可能看不懂. 今天,是我加入I公司3个 ...

  10. rvm的安装, 使用rvm, 安装ruby, 以及gem的使用 (转)

    http://blog.163.com/digoal@126/blog/static/1638770402012425111617904/ rvm 全称Ruby Version Manager,  确 ...