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

最新推荐文章于 2022-05-27 16:33:07 发布

mengxiangxingchen

最新推荐文章于 2022-05-27 16:33:07 发布

阅读量931

点赞数

分类专栏： javascript 文章标签： javascript checkbox select radio

本文链接：https://blog.csdn.net/mengxiang2014/article/details/18000381

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这两天在学习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" οnclick="getRadioValue('sex')"></td>
        <td><input type="button" value="changeValue" οnclick="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" οnclick="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" οnclick="getSelectValue('car')"></td>
        <td><input type="text" id="dispIndex"></td>
        <td><input type="text" id="dispValue"></td>
      </tr>
    </table>
  </div>  
</body>
</html>

mengxiangxingchen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript获取单选按钮，复选按钮，下拉列表的值

这两天在学习javascript，把平时用到的获取单选按钮，复选按钮，还有下拉列表值的方法，总结了一下，便于以后查询。单选，复选，下拉框 .Tab1{ margin-left:450px; margin-top: 50px; } .Tab1 table{ border:1px solid black;
复制链接

扫一扫