js 操作select checkbox 及radio

 

最近经常用JS操作 select checkbox 及radio 几个简单函数记录如下 以备查用

 

Js代码 

1. function getRadioValue(radioName){  
2.    
3.       var obj = document.getElementsByName(radioName);   
4.       var objLen= obj.length;   
5.       var i;  
6.     for (i = 0;i< objLen;i++){  
7.         if (obj [i].checked==true) {  
8.          return obj [i].value;   
9.         }  
10.       }  
11.       return "";  
12. }           
13.   
14.   
15.   
16. //获取复选框的值  
17.  function getCheckboxValue(radioName){  
18.   var obj = document.getElementsByName(radioName);   
19.   var objLen= obj.length;   
20.   var i;  
21.   var result="";  
22.  for (i = 0;i<objLen;i++){  
23.     if (obj [i].checked==true) {  
24.      result+=obj [i].value+",";   
25.     }  
26.   }  
27.   return result;  
28. }  
29.             
30. //复选框 是否处于 选中状态  
31.  function  CheckboxToChecked(eleName, cValue){  
32.    
33.   var obj = document.getElementsByName(eleName);   
34.    
35.   var objLen= obj.length;   
36.   var i;  
37.   var result="";  
38.  for (i = 0;i<objLen;i++){  
39.     
40.     if (obj [i].value==cValue) {  
41.    
42.      obj [i].checked=true;  
43.     }else{  
44.     obj [i].checked=false;  
45.     }  
46.   }  
47.   return result;  
48. }      
49.         
50. //checkBox至少选中一项  
51. function chkCheckBoxChs(objNam,txt){   
52. var obj = document.getElementsByName(objNam);   
53. var objLen= obj.length;   
54. var num=0;  
55. for (i = 0;i< objLen;i++){  
56. if (obj [i].checked==true) {  
57. num++;  
58.  }  
59. }  
60.  if(num==0){  
61.      alert(txt);      
62.       return false;  
63.      }   
64.     return true;  
65. }  

 

 

其他 只读的属性的为 readOnly (注意大小写)

 

Js代码 

1. function toReadOnly(ele ,flag){  
2.         var obj=document.getElementById(ele);  
3.         if(obj!=null){  
4.              if(flag==0){//可读  
5.                 obj.readOnly=false;  
6.                  obj.style.backgroundColor="white";  
7.              }else{//只读  
8.                  obj.readOnly=true;  
9.                  obj.value="";  
10.                  obj.style.backgroundColor="#D8D8D8";  
11.              }  
12.       }  
13.     }  

 以下select 是网上转载的

 

Js代码 

1. 1.判断select选项中 是否存在Value="paraValue"的Item  
2. 2.向select选项中 加入一个Item  
3. 3.从select选项中 删除一个Item  
4. 4.修改select选项中 value="paraValue"的text为"paraText"  
5. 5.设置select中text="paraText"的第一个Item为选中  
6. 6.设置select中value="paraValue"的Item为选中  
7. 7.得到select的当前选中项的value  
8. 8.得到select的当前选中项的text  
9. 9.得到select的当前选中项的Index  
10. 10.清空select的项  
11. -------------------------------------------  
12. //1.判断select选项中 是否存在Value="paraValue"的Item  
13. function jsSelectIsExitItem(objSelect,objItemValue)  
14. {  
15.     var isExit = false;  
16.     for(var i=0;i<objSelect.options.length;i++)  
17.     {  
18.         if(objSelect.options[i].value == objItemValue)  
19.         {  
20.             isExit = true;  
21.             break;  
22.         }  
23.     }        
24.     return isExit;  
25. }   
26.   
27. //2.向select选项中 加入一个Item  
28. function jsAddItemToSelect(objSelect,objItemText,objItemValue)  
29. {  
30.     //判断是否存在  
31.     if(jsSelectIsExitItem(objSelect,objItemValue))  
32.     {  
33.         alert("该Item的Value值已经存在");  
34.     }  
35.     else  
36.     {  
37.         var varItem = new Option(objItemText,objItemValue);  
38. //      objSelect.options[objSelect.options.length] = varItem;  
39.         objSelect.options.add(varItem);  
40.         alert("成功加入");  
41.     }      
42. }  
43.   
44. //3.从select选项中 删除一个Item  
45. function jsRemoveItemFromSelect(objSelect,objItemValue)  
46. {  
47.     //判断是否存在  
48.     if(jsSelectIsExitItem(objSelect,objItemValue))  
49.     {  
50.         for(var i=0;i<objSelect.options.length;i++)  
51.         {  
52.             if(objSelect.options[i].value == objItemValue)  
53.             {  
54.                 objSelect.options.remove(i);  
55.                 break;  
56.             }  
57.         }          
58.         alert("成功删除");              
59.     }  
60.     else  
61.     {  
62.         alert("该select中 不存在该项");  
63.     }      
64. }  
65.   
66. //4.修改select选项中 value="paraValue"的text为"paraText"  
67. function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)  
68. {  
69.     //判断是否存在  
70.     if(jsSelectIsExitItem(objSelect,objItemValue))  
71.     {  
72.         for(var i=0;i<objSelect.options.length;i++)  
73.         {  
74.             if(objSelect.options[i].value == objItemValue)  
75.             {  
76.                 objSelect.options[i].text = objItemText;  
77.                 break;  
78.             }  
79.         }          
80.         alert("成功修改");              
81.     }  
82.     else  
83.     {  
84.         alert("该select中 不存在该项");  
85.     }      
86. }  
87.           
88. //5.设置select中text="paraText"的第一个Item为选中  
89. function jsSelectItemByValue(objSelect,objItemText)  
90. {      
91.     //判断是否存在  
92.     var isExit = false;  
93.     for(var i=0;i<objSelect.options.length;i++)  
94.     {  
95.         if(objSelect.options[i].text == objItemText)  
96.         {  
97.             objSelect.options[i].selected = true;  
98.             isExit = true;  
99.             break;  
100.         }  
101.     }        
102.     //Show出结果  
103.     if(isExit)  
104.     {   
105.         alert("成功选中");              
106.     }  
107.     else  
108.     {  
109.         alert("该select中 不存在该项");  
110.     }      
111. }  
112.   
113. //6.设置select中value="paraValue"的Item为选中  
114. document.all.objSelect.value = objItemValue;  
115.   
116. //7.得到select的当前选中项的value  
117. var currSelectValue = document.all.objSelect.value;  
118.   
119. //8.得到select的当前选中项的text  
120. var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;  
121.   
122. //9.得到select的当前选中项的Index  
123. var currSelectIndex = document.all.objSelect.selectedIndex;  
124.   
125. //10.清空select的项  
126.  document.all.objSelect.options.length = 0;  

 

转载自：http://litxuf.javaeye.com/blog/484484