zoukankan      html  css  js  c++  java
  • JS 如何获取radio或者checkbox选中后的值

    废话不多说,直接上代码:

    代码:

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>JS 如何获取radio或者checkbox选中后的值</title>
    </head>
    
    <body>
      <p>单选框</p>
      <input type="radio" name="sex" value="man" id="man" checked onclick="inputChecked()">
      <label for="man">男</label>
      <input type="radio" name="sex" value="female" id="female" onclick="inputChecked()">
      <label for="female">女</label>
      <p>多选框</p>
      <input type="checkbox" name="fruits" value="apple" id="apple" checked onclick="inputChecked()">
      <label for="apple">苹果</label>
      <input type="checkbox" name="fruits" value="orange" id="orange" onclick="inputChecked()">
      <label for="orange">橙子</label>
      <script>
        inputChecked();
    
        function inputChecked() {
          var inputSelect = document.getElementsByTagName('input');
          var obj = {
              radio: [],
              checkbox: []
            },
            value = '';
          for (var i = 0, len = inputSelect.length; i < len; i++) {
            if (inputSelect[i].checked && inputSelect[i].type === 'radio') {
              obj.radio.push(inputSelect[i].value);
              value += '单选框:' + inputSelect[i].value + '
    ';
            }
            if (inputSelect[i].checked && inputSelect[i].type === 'checkbox') {
              obj.checkbox.push(inputSelect[i].value);
              value += '多选框:' + inputSelect[i].value + '
    ';
            }
          }
          alert(value);
          return obj;
        }
      </script>
    </body>
    
    </html>
    
  • 相关阅读:
    一种想法
    识别link_text
    识别name
    识别id
    文件的读写
    条件和循环
    网站测试-功能测试小结
    拷贝
    #团队博客作业1-小组成员介绍
    软件测试基础-Homework1
  • 原文地址:https://www.cnblogs.com/don-yang/p/9341590.html
Copyright © 2011-2022 走看看