js之表单 （全选、不选、反选）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn1=document.getElementById(‘btn1‘);
    var oBtn2=document.getElementById(‘btn2‘);
    var oBtn3=document.getElementById(‘btn3‘);
    var oDiv=document.getElementById(‘div1‘);
    var aCh=oDiv.getElementsByTagName(‘input‘);

    oBtn1.onclick=function ()
    {
        for(var i=0;i<aCh.length;i++)
        {
            aCh[i].checked=true;
        }
    };

    oBtn2.onclick=function ()
    {
        for(var i=0;i<aCh.length;i++)
        {
            aCh[i].checked=false;
        }
    };

    oBtn3.onclick=function ()
    {
        for(var i=0;i<aCh.length;i++)
        {
            if(aCh[i].checked==true)
            {
                aCh[i].checked=false;
            }
            else
            {
                aCh[i].checked=true;
            }
        }
    };
};
</script>
</head>

<body>
<input id="btn1" type="button" value="全选" /><br>
<input id="btn2" type="button" value="不选" /><br>
<input id="btn3" type="button" value="反选" /><br>
<div id="div1">
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>

</div>
</body>
</html>
时间： 2024-10-10 07:37:23

js之表单 （全选、不选、反选）的相关文章

表单全选取消全选

案例分析: 1.全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可: 2.下面复选框需要全部选中,上面的全选才可以选中做法:给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的,上面全选框就不选中. 效果图: 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8

[oldboy-django][2深入django]老师管理 -- form表单如何生成多选框标签，多选框的默认值显示，以及多选框数据插入到数据库，多选框数据更改到数据库

1 form表单如何生成多选框(包含了多选框可选择内容) - Form设置班级输入框为 select多选 - 多选 class TeacherForm(Form): name = fields.CharField(max_length=16, widget=widgets.TextInput(attrs={'class': 'form-control'}) ) cls = fields.MultipleChoiceField( choices=models.Classes.objects.val

js验证表单大全

js验证表单大全1. 长度限制<script>function test() {if(document.a.b.value.length>50){alert("不能超过50个字符!");document.a.b.focus();return false;}}</script><form name=a onsubmit="return test()"><textarea name="b" cols=&

jquery.form.js 让表单提交更优雅

jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="/src/jquery.form.js"></script> 2.使用 $(function () { va

js 验证表单 js提交验证类

js 验证表单 js提交验证类 附加:js验证radio是否选择 <script language="javascript">function checkform(obj){for(i=0;i<obj.oo.length;i++)         if(obj.oo[i].checked==true) return true; alert("请选择")return false; }</script><form id="f

【转载】[JS]让表单提交返回后保持在原来提交的位置上

有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好的办法就是 在JS中用cookie记录下当前滚动条的位置,然后刷新时读取cookie就可以实现这个功能了.代码如下:<script type="text/javascript"> function Trim(strValue) { //return strValue.repla

angular js 实现表单提交时下面的table获取到表单里面的数据

angular js 实现表单提交时下面的table获取到表单里面的数据<!DOCTYPE html><html ><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <s

js动态控制表单表格

js动态控制表单表格,这里操作只讲,添加一行,删除一行,删除某一行某一列. 直接放代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table id="tabl" border=1 cellpadding=10 cellspacing=0&

js 防止表单重复提交

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title&

JS常用表单验证总结

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti