js基础篇——radio、select

一、radio元素

<fieldset id="form-gra-time">
    <legend>请选择日期粒度：</legend>
    <label>日<input name="gra-time" value="day" type="radio" checked="checked"></label>
    <label>周<input name="gra-time" value="week" type="radio"></label>
    <label>月<input name="gra-time" value="month" type="radio"></label>
</fieldset>

1、获取上面代码中被选取的radio

var graTime = document.getElementsByName("gra-time");
    var timeInterval
    for (var i = graTime.length - 1; i >= 0; i--) {
       if (graTime[i].checked) {
          timeInterval = graTime[i].value;
          // alert(timeInterval); 
       } 
} 

解析：

　　1)fieldset标签：组合表单当中的相关元素；

　　2)legend标签：为fieldset元素定义标题；

　　3)使用getElementsByName获取所有radio的集合；

　　4)使用radio的checked属性，查看是否被选取；

二、select

<fieldset>
    <legend>请选择查看的城市：</legend>
    <select id="city-select" >
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    </select>
  </fieldset>

1、获取上面代码中被选取的选项：

var selectCity = document.getElementById("city-select");
var index = selectCity.selectedIndex;
var city = selectCity[index].text;

解析：

　　1）使用select元素的selectedIndex属性，获取被选取的选项索引；

　　2）通过索引获取被选取项的值；