<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>javascript checkbox全选 反选  全不选</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

</head>

<body>

    <form action="">

        <p><input type="checkbox"></p>

        <p><input type="checkbox"></p>

        <p><input type="checkbox"></p>

        <p><input type="checkbox"></p>

        <p><input type="checkbox"></p>

        <p><input type="checkbox"></p>

        </br>

        <input type="button" id="a_xuan" value="全选" onclick="all_xuan()">

        <input type="button" id="a_n_xuan" value="反选" onclick="fan_xuan()">

        <input type="button" id="f_xuan" value="全不选" onclick="all_no_xuan()">

    </form>

</body>

<script>

//全选

function all_xuan()

{

    var all_xuan=document.getElementById('a_xuan');

    if(all_xuan!='')

    {

        var input_c=document.getElementsByTagName('input');

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

        {

            input_c[i].checked="true";

        }

    }

}

//全不选

function all_no_xuan()

{

    var all_xuan=document.getElementById('f_xuan');

    if(all_xuan!='')

    {

        var input_c=document.getElementsByTagName('input');

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

        {

            input_c[i].checked="";

        }

    }

}

//反选

function fan_xuan()

{

    var all_xuan=document.getElementById('a_n_xuan');

    if(all_xuan!='')

    {

        var input_c=document.getElementsByTagName('input');

        for(var i=0;i<input_c.length-1;i++)

        {

            if(input_c[i].checked)

            {

                input_c[i].checked="";

            }else

            {

                input_c[i].checked="true";

            }

        }

    }

}

</script>

</html>

表单javascript checkbox全选 反选 全不选的更多相关文章

  1. 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

    页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...

  2. 表单提交checkbox的值

    问题:怎么在表单提交的时候提交多个多选框CheckBox的值? 解决方式:在CheckBox的name属性名后添加[]; 例: <input type="checkbox" ...

  3. 表单Checkbox全选反选全不选

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

  4. checkbook全选/反选/全不选

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  5. vue实现单选多选反选全选全不选

    单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...

  6. Bootstrap 表单和图片 （内联表单，表单合组，水平排列，复选框和单选框，下拉列表，校验状态，添加额外的图标，控制尺寸，图片）

    一．表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...

  7. 文字和表单（checkbox/radio）元素垂直对齐方法，兼容Firefox和IE。

    这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮.在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何 ...

  8. 在PHP中处理表单之—Checkbox

    原文翻译自:http://www.html-form-guide.com/php-form/php-form-checkbox.html 单个checkbox  形如: <form action ...

  9. Vue表单输入绑定（文本框和复选框）

    文本框 <!DOCTYPE html><html>    <head>        <meta charset="utf-8">  ...

随机推荐

  1. JavaScript 数组中查找符合条件的值

    数组实例的find方法,用于找出第一个符合条件的数组成员.它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员.如果没有符合条件的成员,则返回u ...

  2. JSP中getParameter和getAttribute区别

    (1)HttpServletRequest类有setAttribute()方法,而没有setParameter()方法 (2)当两个Web组件之间为链接关系时,被链接的组件通过getParameter ...

  3. android AsyncTask 详细例子

    一个典型AsyncTask的. 01 public class DialogTestActivity extends Activity { 02     private Button button1; ...

  4. windows消息常量值

    WM_NULL = 0WM_CREATE = 1应用程序创建一个窗口WM_DESTROY = 2一个窗口被销毁WM_MOVE = 3移动一个窗口WM_SIZE = 5改变一个窗口的大小WM_ACTIV ...

  5. 技术路线 vs 技术管理路线

    最近因为要给刚毕业的学生做一次演讲,所以就职业发展这类话题先以写博客的形式做一些思考,希望届时能给同学们带来质量更高的内容.我在<驾驭你的"职场布朗运动">一文中谈了2 ...

  6. Windows 不能在 本地计算机 启动 SQL Server(MSSQLSERVER)。错误码126

    结合自己的解决方案和网络上搜到的内容,现总结如下: 首先你要知道问题出在了什么地方才能针对性处理. 1.打开事件查看器 计算机右击——管理 右侧会出现错误列表,在其中找到SQL server有关的查看 ...

  7. Tomcat项目部署方式

    一.静态部署 1.直接将web项目文件件拷贝到webapps 目录中      Tomcat的Webapps目录是Tomcat默认的应用目录,当服务器启动时,会加载所有这个目录下的应用.所以可以将JS ...

  8. MFC 多线程

    MFC对多线程编程的支持 MFC中有两类线程,分别称之为工作者线程和用户界面线程.二者的主要区别在于工作者线程没有消息循环,而用户界面线程有自己的消息   队列和消息循环. 工作者线程没有消息机制,通 ...

  9. mysql to sql sersver

    USE SCK_PARA GO /****** Object:  StoredProcedure [dbo].[syncdata_mysql2sqlserver]    Script Date: 08 ...

  10. nginx对于Yii2的前后台的配置

    虽然是个基础问题,但也折腾了不少时间,记录下来,希望对新手有所帮助.例如我的前台地址yooao.cc,后台地址back.yooao.cc  back.yooao.cc是yooao.cc的一个子域名. ...