js使用DOM设置单选按钮、复选框及下拉菜单的方法_javascript技巧

本文实例讲述了js使用DOM设置单选按钮、复选框及下拉菜单的方法。分享给大家供大家参考。具体实现方法如下：

1.设置单选按钮

单选按钮在表单中即它是一组供用户选择的对象，但每次只能选一个。每一个都有checked属性，当一项选择为ture时，其它的都变为false.

先贴上一个例子：

复制代码 代码如下:

    相机品牌：
   

 
 Canon
   

   

 
 Nikon
   

   

 
 Sony
   

   

 
 Olympus
   

   

 
 Samsung
   

   

 
 Pentax
   

   

 
 others
   

   

 
   

   

 
 
   

单选按钮在表单中即它是一组供用户选择的对象，但每次只能选一个。每一个都有checked属性，当一项选择为ture时，其它的都变为false.
从以上代码中看出，id和name是不同的，一组单选按钮中它们的name是相同的，只有一个被选中。id则是绑定或者其它选择作用的。

其中代码中：检查被选中对象的代码是（当某一项的chcked值为ture时，遍历结束）

复制代码 代码如下:

var oForm = document.forms["uForm1"];
var aChoices = oForm.camera;
for (i = 0; i     if (aChoices[i].checked) //如果发现了被选中项则退出
 break;
alert("相机品牌是：" + aChoices[i].value);

2.设置多选框

与单选按钮不同，复选框可以同时选中多个选项进行处理，邮箱中每条邮件之前的复选框就的典型的运用

复制代码 代码如下:

    喜欢做的事：
   

 
 打球
   

   

 
 看电视
   

   

 
 上网
   

   

 
 看书
   

   

 
 旅游
   

   

 
 音乐
   

   

 
 其它
   

   

 
 
 
 
   

复选框原理利用checked属性布尔值进行确定，全选和不全选可以采用0和1的方式传递参数。

3.下拉菜单

下拉菜单是比较常用的表单元素。当它的下拉为单选时，和单选按钮功能一样，当下拉菜单为多选时multiple="multiple时，功能相当复选框，但所占面积远小于复选框。

下拉菜单的常用属性：

属性	说明
length	表示选项个数
selected	布尔值，表示是否被选中
SelectedIndex	被选中选项的序列号，如果没有选项被选中则为-1,对于多选下拉菜单而言，返回第一个被选中 的序号，从0开始计数
text	选项的文本
value	选项的值
type	下拉菜单的类型，单选返回select-one,多选返回select-multiple
options	获取选项的数组 ，例如：oSelectBox.options[2]，表示下拉菜单oSelectBox第三项

  
①. 下拉菜单获取单选值

复制代码 代码如下:

    星座：
   

 
     白羊
     金牛
     双子
     巨蟹
     狮子
     处女
     天秤
     天蝎
     射手
     摩羯
     水瓶
     双鱼
 
   

   

②. 下拉菜单为多选时，取值

复制代码 代码如下:

 星座：
 

    
  白羊
  金牛
  双子
  巨蟹
  狮子
  处女
  天秤
  天蝎
  射手
  摩羯
  水瓶
  双鱼
    
 

 

③. 通用取值（下拉单选和多选的情况）

复制代码 代码如下:

    星座：
   

 
     白羊
     金牛
     双子
     巨蟹
     狮子
     处女
     天秤
     天蝎
     射手
     摩羯
     水瓶
     双鱼
 
 
   

   

 
     白羊
     金牛
     双子
     巨蟹
     狮子
     处女
     天秤
     天蝎
     射手
     摩羯
     水瓶
     双鱼
 
 
   

希望本文所述对大家的javascript程序设计有所帮助。