一、限制复选框最多选择几项
1 <h2>限制复选框最多选择几项</h2> 2 <input type="checkbox" name='forbidcheckSelects'>1<br /> 3 <input type="checkbox" name='forbidcheckSelects'>2<br /> 4 <input type="checkbox" name='forbidcheckSelects'>3<br /> 5 <input type="checkbox" name='forbidcheckSelects'>4<br /> 6 <p>最多选择3项</p>
1 window.onload = function(){
2 var _forbidcheckSelects = document.getElementsByName("forbidcheckSelects"),
3 //限制复选框最多选择3项
4 banNums = 3;
5 for(var i in _forbidcheckSelects){
6 _forbidcheckSelects[i].onclick = function(){
7 var __forbidcheckSelects = document.getElementsByName("forbidcheckSelects"),
8 selectNum = 0;
9 for(var i in __forbidcheckSelects){
10 if(i == "length") break;
11 if(__forbidcheckSelects[i].checked){
12 selectNum++;
13 }
14 }
15 //如果选中的复选项，超过限制最大数，将当前的选中选项设置为没选中false
16 if(selectNum > banNums) {
17 this.checked = false;
18 }
19
20 }
21
22 }
23 };
二、Checkbox全选、取消全选、反选
1 <h2>Checkbox全选、取消全选、反选</h2> 2 <p><input type="button" id='allSelect' value="全选"><input type="button" id='canelallSelect' value="取消全选"><input type="button" id='_select' value='反选'> </p> 3 <input type="checkbox" name='actionSelects'>1<br /> 4 <input type="checkbox" name='actionSelects'>2<br /> 5 <input type="checkbox" name='actionSelects'>3<br /> 6 <input type="checkbox" name='actionSelects'>4<br />
1 window.onload = function(){
2 var targets = document.getElementsByName("actionSelects"),
3 targetsLen = targets.length,
4 i = 0;
5
6 document.getElementById("allSelect").onclick = function(){
7 for(i = 0 ;i < targetsLen ; i ++){
8 targets[i].checked = true;
9 }
10 }
11
12 document.getElementById("canelallSelect").onclick = function(){
13 for(i = 0 ;i < targetsLen ; i ++){
14 targets[i].checked = false;
15 }
16 }
17
18 document.getElementById("_select").onclick = function(){
19 for(i = 0 ; i < targetsLen ; i ++){
20 targets[i].checked = !targets[i].checked;
21 }
22
23 }
24 };
三、JavaScript对上传文件相关操作
1 <h2>JavaScript对上传文件相关操作</h2> 2 <form id='fileUpload' enctype="multipart/form-data"> 3 <p><input type="file" name='file1' id='filedemo1'> </p> 4 <input type="button" id='addFileUpload' value="添加"> 5 <input type="button" id='clearFileUpload' value="清空"> 6 <input type="button" id='fileUploadSub' value="上传"> 7 </form>
1 window.onload = function(){
2 uploadCount = 1;//增加的文件“input”标示符
3
4 isIE = function(){//是否是ie
5 return document.all ? true : false;
6 }
7
8 getFileSize = function(_f){//获取文件大小
9 var _fileSize = 0;
10 if (this.isIE() && !_f.files) {
11 var filePath = _f.value;
12 var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
13
14 if(!fileSystem.FileExists(filePath)){
15 return 0;
16 }
17 var file = fileSystem.GetFile (filePath);
18 _fileSize = file.Size;
19 } else {
20 _fileSize = (_f.files[0] && _f.files[0].size) || 0;
21 }
22 return _fileSize;
23 }
24
25 fileType = function(_eForm, types){//限制上传文件的格式
26 var _elements = _eForm.elements,
27 _elementsLen = _elements.length
28 _ei = null,
29 _v = "",
30 _contentType = "",
31 i = 0;
32 for (; i < _elementsLen ; i++){
33 _ei = _elements[i];
34 if(_ei.type == "file"){
35 //var _i = _ei.value.lastIndexOf("\\");
36 _v = _ei.value,
37 _contentType = _v && _v.match(/^(.*)(\.)(.{1,8})$/)[3];
38
39 if(!_v || types.search(_contentType) != -1){//如果文件上传为空或者类型为限制类型则返回false
40 return false;
41 }
42 }
43 }
44 return true;
45 }
46
47 clearFile = function(_eForm){//清空input为file的ui
48 var _elements = _eForm.elements,
49 _elementsLen = _elements.length,
50 _ei = null,
51 i = 0;
52 for (; i < _elementsLen ; i++){
53 _ei = _elements[i];
54 (_ei.type == "file") && ((isIE() && (_ei.outerHTML = _ei.outerHTML)) || (_ei.value = ""));//如果为IE，利用其特性清空file文本数据，否则直接将value设置为空值
55 }
56 }
57
58 fileUpload = function(){//上传文件的相关业务
59 var _fileUpload = document.getElementById("fileUpload"),
60 _addFileUpload = document.getElementById("addFileUpload"),
61 _clearFileUpload = document.getElementById("clearFileUpload"),
62 _filedemo1 = document.getElementById("filedemo1"),
63 _fileUploadSub = document.getElementById("fileUploadSub");
64 _fileUploadSub.onclick =function(){
65 alert("测试获取文件大小：" + getFileSize(_filedemo1));//获取上传文件的大小
66 if(!fileType(_fileUpload, "text")){//限制上传文件的格式 ---参数（上传文件的表单对象， 被限制的格式）
67 return;
68 }
69 }
70
71 _clearFileUpload.onclick =function(){//清除上传文件的内容
72 clearFile(_fileUpload);
73 }
74
75 _addFileUpload.onclick =function(){//动态多文件上传，添加上传文件元素
76 uploadCount++;
77 var _input=document.createElement("input"),
78 _pE=document.createElement("p");
79 _input.name="filedemo"+uploadCount;
80 _input.id="filedemo"+uploadCount;
81 _input.type="file";
82 _pE.appendChild(_input);
83 _fileUpload.insertBefore(_pE,document.getElementById("addFileUpload"));
84 }
85 }
86 fileUpload();
87 };