用JS和JQuery离别猎取表单元素的值(select,checkbox,radio)

2019年8月20日 210次阅读 来源: 青草怪味豆

空话不多说直接上代码

HTML部份

<html !DOCTYPE>
  <head>
    <title>表单元素值猎取</title>
  </head>
  <body>
    <div>
      <h1>下拉列表</h1>
      <select id="weekday">
        <option>---</option>
        <option>星期一</option>
        <option>星期二</option>
        <option>星期三</option>
        <option>星期四</option>
        <option>星期五</option>
      </select>
    </div>
    <div>
      <h1>多选框</h1>
      <input type="checkbox" name="hobby" value="swimming"><span>swimming</span>
      <input type="checkbox" name="hobby" value="singing"><span>singing</span>
      <input type="checkbox" name="hobby" value="drawing"><span>drawing</span>
      <input type="checkbox" name="hobby" value="travelling"><span>travelling</span>
    </div>
    <div>
        <h1>单选框</h1>
        <input type="radio" name="sex" value="boy"><span>boy</span>
        <input type="radio" name="sex" value="girl"><span>girl</span>
    </div>
    <div>
      <input type="button" value="点击猎取下拉列表的值" onclick="getSelectorValue()">
      <input type="button" value="点击猎取多选框的值" onclick="getCheckboxValue()">
      <input type="button" value="点击猎取单选框的值" onclick="getRadioValue()">
    </div>
  </body>
</html>

《用JS和JQuery离别猎取表单元素的值(select,checkbox,radio)》

用JavaScript的要领

诠释申明部份在解释中

<script>
  //用原生JS猎取
  var getSelectorValue = function(){
    var selector = document.getElementById("weekday");
    //先猎取到全部下拉列表，在猎取到被选中元素的索引，末了获得值
    var value = selector.options[selector.selectedIndex].value;
    console.log(value);
  }

  var getCheckboxValue = function(){
    var checkbox = document.getElementsByName("hobby");
    console.log(checkbox);//是一个节点列表
    checkbox.forEach(element => {
      if(element.checked){
        //猎取到被选中的元素节点
        console.log(element);
        //猎取节点中的value属性
        console.log(element.value);
      }
    });
  }

  var getRadioValue = function(){
    var radio = document.getElementsByName("sex");
    console.log(radio);//是一个节点列表
    radio.forEach(element => {
      if(element.checked){
        //猎取到被选中的元素节点
        console.log(element);
        //猎取节点中的value属性
        console.log(element.value);
      }
    });
  }  
</script>

用JQuery的要领

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  //用JQuery猎取

  var getSelectorValue = function(){
    var value = $("#weekday").val();
    console.log(value);
  }

  var getCheckboxValue = function(){
    //猎取到一切被选中的列表
    var checkbox = $("input[name='hobby']:checked");
    for(var i=0; i<checkbox.length; i++){
      console.log(checkbox[i].value);
    }    
  }

  var getRadioValue = function(){
    //由于是单选能够直接猎取到被选中的值
    var value = $("input[name='sex']:checked").val();
    console.log(value); 
  }  
</script>

Practice Makes Perfect

    原文作者：青草怪味豆
    原文地址: https://segmentfault.com/a/1190000017775907
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞