<!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. 源码分析之spring-JdbcTemplate日志打印sql语句

    对于开源的项目来说的好处就是我们遇到什么问题可以通过看源码来解决. 比如近期有个同事问我说,为啥JdbcTemplate中只有在Error的时候才打印出sql语句呢.我一想,这和log的配置有关系吧. ...

  2. 小米路由器mini如何设置外网访问wan网站的方法

    很多的玩友都在小米路由器mini上面搭建了自己的网站,有些朋友还需要设置对外网进行开放,我自己也在路由器上面实践了使用,下面与大家分享一下如何设置外网访问路由器网站的办法. 工具/原料 小米路由器mi ...

  3. (转)Android创建桌面快捷方式两种方法

    [IT168技术]Android在桌面上生成快捷方式有两种情况,一种是直接在桌面直接生成;一种是长按桌面,在弹出的快捷菜单中生成. 谈谈在桌面上直接生成.个人觉得这个比较爽快,既然都是快捷方式了干嘛还 ...

  4. Javascript:重用之道

    近期写了大量的js,愈发觉得自己的代码过于冗余,所以,利用周末的时间研习代码重用之道,有了这篇博文所得: 重用代码: 1.尽量保证 HTML 代码结构一致,可以通过父级选取子元素 2.把核心主程序实现 ...

  5. 浅谈管道模型(Pipeline)

    本篇和大家谈谈一种通用的设计与处理模型--Pipeline(管道). Pipeline简单介绍 Pipeline模型最早被使用在Unix操作系统中.据称,假设说Unix是计算机文明中最伟大的发明,那么 ...

  6. java基础之数组

    数组的定义 数组的应用 1, 2, 3, 4,

  7. 查看哪些ip破解你ssh密码以及次数

    在互联网中,总有一些无聊的人,每天不断的猜解别人服务器的密码!作为linux服务器的管理员,我们应该了解哪些IP经常不断地扫描我们的SSH端口以尝试暴力破解,下面我们用一条命令简单列出哪些IP破解你S ...

  8. Gson 简易笔记

    #Gson 简易笔记 之前用 fastjson.它连个规矩的文档都没有,而且在github的wiki上写着: gson的g可能是"龟"拼音的缩写,龟速的json库." 各 ...

  9. 用pod导入ReactiveCocoa

    用pod导入ReactiveCocoa [1]   第一种 platform:ios,'7.0' pod 'ReactiveCocoa' [2]  第二种 pod 'ReactiveCocoa','2 ...

  10. （四）CodeMirror - API

    内容相关 cm.getValue() cm.setValue() cm.getRange() editor.getRange({line:1},{line:2}) // 获取内容块字符 cm.repl ...