javascript获取单选按钮，复选按钮，下拉列表的值

来源：互联网发布：如何关掉nginx服务编辑：程序博客网时间：2024/05/29 11:03
这两天在学习javascript，把平时用到的获取单选按钮，复选按钮，还有下拉列表值的方法，总结了一下，便于以后查询。
<html><head><meta charset=utf-8 /><title>单选，复选，下拉框</title>  <style type="text/css">    .Tab1 table{           border:1px solid black;      border-collapse: collapse;    }    .Tab1 td {      border:1px solid black;      height: 10px;      width: 100px;      text-align: center;    }  </style>  <script type="text/javascript">  //获取单选按钮的值  function getRadioValue(sex) {    var radios = document.getElementsByName(sex);    for (var i = 0; i < radios.length; i++) {      if(radios[i].checked) {        if(radios[i].value === "male"){          document.getElementById('dispSex').value = "男";        }else{          document.getElementById('dispSex').value = "女";        }              }    }  }  //通过修改值改变选中的单选按钮  function changeRadioValue (sex,radioValue) {    var radios = document.getElementsByName(sex);    for (var i = 0; i < radios.length; i++) {          if(radios[i].value === radioValue) {        radios[i].checked = true;        return;      }    }  }  //点击按钮改变选中的单选按钮  function changeRadioValue2 (sex) {    var radios = document.getElementsByName(sex);        for (var i = 0; i < radios.length; i++) {          if(radios[i].checked) {        radios[i].checked = false;                if(i+1 >= radios.length){          i = -1;        }                radios[i+1].checked = true;        return;      }     }  }  //获取多选按钮的值  function getCheckboxValue(city) {    var cities = document.getElementsByName(city);    var selectCities = [];    //var sc = "";    for (var i = 0; i < cities.length; i++) {      if (cities[i].checked) {        selectCities[selectCities.length] = cities[i].value;        //selectCities.push(cities[i].value);        //sc += cities[i].value + ",";        //三种方式效率比较："+=" > "arr[arr.length] = value" > arr.push(value)，是这样吗？      }    }    document.getElementById('dispCity').value = selectCities.join();    //document.getElementById('dispCity').value = sc;  }  //获取下拉列表的值  function getSelectValue (car) {    var cars = document.getElementById(car);    if(cars.options[0].selected) {//判断某项是否被选中       alert("第一项被选中");    }    document.getElementById('dispIndex').value = cars.options.selectedIndex+1;    document.getElementById('dispValue').value = cars.options[cars.selectedIndex].text;  }  </script></head><body>  <div class="Tab1">    <table>      <tr>        <td>男<input type="radio" checked="checked" name="sex" value="male"></td>        <td>女<input type="radio" name="sex" value="female"></td>        <td><input type="button" value="getValue" onclick="getRadioValue('sex')"></td>        <td><input type="button" value="changeValue" onclick="changeRadioValue2('sex')"></td>        <td><input type="text" id="dispSex"></td>      </tr>      <tr>        <td>北京<input type="checkbox" name="city" value="北京"></td>        <td>天津<input type="checkbox" name="city" value="天津" checked="checked"></td>        <td><input type="button" value="getValue" onclick="getCheckboxValue('city')"></td>        <td><input type="text" id="dispCity"></td>      </tr>      <tr>        <td colspan="2">          <select id="car" >            <option value="baoma">宝马</option>            <option value="benchi" selected="selected">奔驰</option>            <option value="aodi">奥迪</option>            <option value="fengtian">丰田</option>          </select>        </td>        <td><input type="button" value="ClickMe" onclick="getSelectValue('car')"></td>        <td><input type="text" id="dispIndex"></td>        <td><input type="text" id="dispValue"></td>      </tr>    </table>  </div>  </body></html>
0 0