表单javascript checkbox全选反选全不选

<!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>

时间： 2024-12-06 18:58:40

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

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

页面点击按钮添加一行删除一行全选反选全不选页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /> <script type=&qu

表单提交checkbox的值

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

表单中有checkbox,配置参数如下: { display: "确认退款", name: "refund", newline: true, type: "checkbox", } 当提交表单时,该checkbox明明已经处于选中状态,但是提交的数据中refund还是为空字符串. 查看HTML元素,生成的checkbox的input元素中根本没有value,当然提交的数据就为空了. 没有好的解决办法,只能在表单提交时,先通过JS代码取出表单数据,

checkbook全选/反选/全不选

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><ul id="list"> <li><label><input type="checkbox"

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

一．表单基本格式注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件包括:text.password.datetime.datetime-local.date.month.time.week. number.email.url.search.tel 和 color. <form> <div class="form-group"> <label>电子邮件</label> <input type=&

在PHP中处理表单之—Checkbox

原文转载自:http://www.html-form-guide.com/php-form/php-form-checkbox.html 单个checkbox 形如: <form action="checkbox-form.php" method="post"> Do you need wheelchair access? <input type="checkbox" name="formWheelchair&quo

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

这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮.在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何设置的情况下,是无法对齐的,而且在Firefox和IE中相差甚大.即使设置了vertical-align:middle,也依然不能完美对齐. 解决办法: 1.文字大小必须是偶数,比如12PX. 2.将文字加上label标签并且也添加vertical-align:middle样式. 3.然后去除表单元

表单全选反选全不选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>请输入关键词</title> <script type="text/javascript" src="js/jquery.min.js"></script> </head><bod

js实现全选,反选,全不选

思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态. js代码 <script> window.onload=function(){ var CheckAll=document.getElementB

表单javascript checkbox全选 反选 全不选

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

表单javascript checkbox全选反选全不选

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