js使用DOM设置单选按钮、复选框及下拉菜单的方法(2)

<form method="post" action="addInfo.aspx">
    喜欢做的事：
    <p>
 <input type="checkbox" value="ball">
 <label for="ball">打球</label>
    </p>
    <p>
 <input type="checkbox" value="TV">
 <label for="TV">看电视</label>
    </p>
    <p>
 <input type="checkbox" value="net">
 <label for="net">上网</label>
    </p>
    <p>
 <input type="checkbox" value="book">
 <label for="book">看书</label>
    </p>
    <p>
 <input type="checkbox" value="trip">
 <label for="trip">旅游</label>
    </p>
    <p>
 <input type="checkbox" value="music">
 <label for="music">音乐</label>
    </p>
    <p>
 <input type="checkbox" value="其它">
 <label for="others">其它</label>
    </p>
    <p>
 <input type="button" value="全选" />
 <input type="button" value="全不选" />
 <input type="button" value="反选" />
 <input type="button" value="提交"  />
    </p>
</form>

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

3.下拉菜单

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

下拉菜单的常用属性：

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

复制代码 代码如下:

<script language="javascript">
    function checkSingle() {
 var oForm = document.forms["myForm1"];
 var oSelectBox = oForm.constellation;
 var iChoice = oSelectBox.selectedIndex; //获取选中项
 alert("您选中了" + oSelectBox.options[iChoice].text);
    }
</script>

<form method="post">
    <label for="constellation">星座：</label>
    <p>
 <select >
     <option value="Aries" selected="selected">白羊</option>
     <option value="Taurus">金牛</option>
     <option value="Gemini">双子</option>
     <option value="Cancer">巨蟹</option>
     <option value="Leo">狮子</option>
     <option value="Virgo">处女</option>
     <option value="Libra">天秤</option>
     <option value="Scorpio">天蝎</option>
     <option value="Sagittarius">射手</option>
     <option value="Capricorn">摩羯</option>
     <option value="Aquarius">水瓶</option>
     <option value="Pisces">双鱼</option>
 </select>
    </p>
    <input type="button" value="查看选项" />
</form>

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

复制代码 代码如下: