表单javascript checkbox全选 反选 全不选

时间：2022-04-14 23:14:53
<!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全选&sol;反选&sol;全不选

    <!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&sol;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. Redis 数据类型及其特点

    Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). String(字符串) string是redis最 ...

  2. keystonejs

    开始之前先确保你已经安装了Node.js 0.10+ 和MongoDB v2.4+. 要使用KeystoneJS,你需要掌握合理的Javascript知识,并熟悉数据库概念之类的基础知识,会用 nod ...

  3. sql从某不连续的数字中将其分段并找出缺失的数字并分段

    首先做准备数据 )) ') ') ') ') ') ') ') ') ') ') ') ') ') ') ') ') 将数据转换成应该处理的数据格式 ),colValue INT ) ) ,LEN(c ...

  4. 初学springMVC搭建框架过程及碰到的问题

    刚刚开始学spring框架,因为接了一个网站的项目,想用spring+springMVC+hibernate整合来实现它,现在写下搭建框架的过程及碰到的问题.希望给自己看到也能让大家看到不要踏坑. 一 ...

  5. Maven命令行创建web项目，并部署到jobss当中&lpar;解决No plugin found for prefix &&num;39&semi;jboss-as&&num;39&semi; in the current project and in the plugin groups &lbrack;org&period;apache&period;maven&period;plugins&comma;问题&rpar;

    首件创建项目:此处可参照:http://maven.apache.org/guides/mini/guide-webapp.html mvn archetype:generate -DgroupId= ...

  6. laravel post请求失败

    今天继续研究laravel,在路由里注册了一个控制器路由Route::controller(). 先get请求一个页面 class UserController extends Controller{ ...

  7. FZU 1896 神奇的魔法数 dp

    网上都说是数位dp 但是虽然在队伍里负责动态规划 但是数位dp还不会…… 百度了一下 发现和最大子序列思路差不多…… 最大子序列的dp[i][j]是表示两个序列前i项和前j项的最大子序列…… dp[i ...

  8. DenseNet

    特点: dense shortcut connections 结构: DenseNet 是一种具有密集连接的卷积神经网络.在该网络中,任何两层之间都有直接的连接,也就是说,网络每一层的输入都是前面所有 ...

  9. Github Atom开源文本代码编辑器- 由 Github 打造的下一代编程开发利器

    个人理解:Github 热度超凡的一个项目Atom,electron是整个atom的核心,对于electron可以理解成 electron ＝io.js + Chromium    通过 Electr ...

  10. linux下redis数据库的简单使用

    一.redis简介 Redis是一个key-value存储系统.和 Memcached类似,但是解决了断电后数据完全丢失的情况,而且她支持更多无化的value类型,除了和string外,还支持list ...

相关文章