应无所住,而生其心
排名
1
文章
860
粉丝
112
评论
163
net core webapi post传递参数
庸人 : 确实坑哈,我也是下班好了好几次,发现后台传递对象是可以的,但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器,因为现在百度富文本已经停止维护了,用tinymec...
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

js获取文本框,单选框,复选框,下拉列表等值

3867人阅读 2016/10/11 17:20 总访问:5182871 评论:0 收藏:0 手机
分类: 前端

html:

  1. <form id="form1" runat="server">
  2.     <div>
  3.         <table>
  4.             <tr>
  5.                 <td>用户名:
  6.                 </td>
  7.                 <td>
  8.                     <input type="text" id="username" />
  9.                 </td>
  10.             </tr>
  11.             <tr>
  12.                 <td>密码:
  13.                 </td>
  14.                 <td>
  15.                     <input type="password" />
  16.                 </td>
  17.             </tr>
  18.             <tr>
  19.                 <td>性别:
  20.                 </td>
  21.                 <td>
  22.                     <input type="radio" name="sex" checked="checked" value="男" />
  23.                         <input type="radio" name="sex" value="女" />
  24.                         <input type="radio" name="sex" value="保密" />保密
  25.                 </td>
  26.             </tr>
  27.             <tr>
  28.                 <td>爱好:
  29.                 </td>
  30.                 <td>
  31.                     <input type="checkbox" name="hobby" value="王者" />王者
  32.                     <input type="checkbox" name="hobby" value="羽毛球" />羽毛球
  33.                     <input type="checkbox" name="hobby" value="篮球" />篮球
  34.                 </td>
  35.             </tr>
  36.             <tr>
  37.                 <td>工作:
  38.                 </td>
  39.                 <td>
  40.                     <select id="work">
  41.                         <option value="1">软件工程师</option>
  42.                         <option value="2">UI设计师</option>
  43.                         <option value="6" selected="selected">挖掘机</option>
  44.                         <option value="7">厨师</option>
  45.                     </select>
  46.                 </td>
  47.             </tr>
  48.             <tr>
  49.                 <td>
  50.                     <input type="button" id="regbutton" value="注册" />
  51.                 </td>
  52.             </tr>
  53.         </table>
  54.     </div>
  55. </form>

js:

  1. <script>
  2.     //通过id拿到按钮
  3.     var regbutton = document.getElementById("regbutton");
  4.     //绑定事件
  5.     regbutton.onclick = function ({
  6.         //获取用户名
  7.         var username = document.getElementById("username");
  8.         if (username.value == "" || username.value == null) {
  9.             alert("用户名不能为空!");
  10.             return;
  11.         }
  12.         //获取选中的性别
  13.         var sexs = document.getElementsByName("sex");
  14.         for (var i = 0; i < sexs.length; i++) {
  15.             if (sexs[i].checked) {
  16.                 alert(sexs[i].value);
  17.             }
  18.         }
  19.         //获取爱好
  20.         var hobby = document.getElementsByName("hobby");
  21.         for (var i = 0; i < hobby.length; i++) {
  22.             if (hobby[i].checked) {
  23.                 alert(hobby[i].value);
  24.             }
  25.         }
  26.         //获取工作
  27.         var work = document.getElementById("work");
  28.         alert(work.value);
  29.         //获取text方法1:
  30.         var options = work.getElementsByTagName("option");
  31.         for (var i = 0; i < options.length; i++) {
  32.             if (options[i].selected)
  33.                 alert(work[i].text);
  34.         }
  35.         //获取text方法2:
  36.         for (var i = 0; i < work.length; i++) {
  37.             if (work[i].selected) {
  38.                 alert(work[i].text);
  39.             }
  40.         }
  41.     }
  42. </script>


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

js与Controller中分割字符串的方法

js: varstr=OpenRule; varstrs=newArray(); strs=str.split(&quot;,&quot;); for(vari=0;i&lt;strs.length;i++){ $(&q...

珍藏!! js CSS不传之秘集合

&lt;!--其中5指每隔5秒刷新一次页面--&gt; &lt;metahttp-equiv=&quot;refresh&quot;content=&quot;5&quot;&gt; =========...

jsON对象和jsON字符串的区别

JSON对象是直接可以使用JQuery操作的格式,如C#中可以用对象(类名)点出属性(方法)一样var str2 = { &quot;name&quot;: ...

对象转jsON

/// &lt;summary&gt; /// 对象转json /// &lt;/summary&gt; public static string ToJson(object jsonObject) ...

来!!!今天玩 json

别怪我懒,其实我是真的懒///&lt;summary&gt; ///List转成json ///&lt;/summary&gt; ///&lt;typeparamname=&quot;T&quot...

js遍历localStorage的键值对

//遍历本地存储localStorage for(vari=0;i&lt;localStorage.length;i++){ varkey=localStorage.key(i);//获取本地存储的K...

拓展js通用方法来对应c操作

有很多时候,js不能像c#一样有那样多的方法操作,但是我们可以自己写一些方法,让他拥有:比如最常见的一些:注意:js里的...

js的localStorage

localStorage的优势1、localStorage拓展了cookie的4K限制2、localStorage会可以将第一次请求的数据直接存储到本地,这个相...

js监听input、keydown有输入法时打字完成后触发事件

在给输入框绑定input或keydown事件时预期效果是有输入法时,输入中文后触发事件,不希望输一个字母就触发一次事件可以用到c...

js截取两个字符中间的字符串

使用正则表达式来取比如我们要取brush:js;toolbar:false 这个字符串冒号和分号中间的字符串可以varclassname=&quot;brush:j...

Vue.js+Layer实现表格数据绑定与更新

一:使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接...

js使用正则进行常用验证

?:问号前面的数字匹配0次或1次,也就是懒惰匹配,最多匹配一次+:匹配1次到无穷次*:匹配0次到无穷次验证只能:数字、字母...

js字符串的替换

vartitle=&quot;我是你的大表哥&quot;; title=title.replace(&quot;大表哥&quot;,&quot;大表妹&quot;); alert(title);输...

Vue.js 实现省市联动

HTML代码&lt;divid=&quot;pro_citys&quot;&gt; 省:&lt;selectid=&quot;provice&quot;v-on:change=&quot;prochange()&quo...

Vue.js常见问题

一:花括号当做字符串显示的问题1:检查下绑定到vue.js的id是否重复,如果id重复了,就有可能存在这种问题,因为有可能把数...

vue.js常用指令

v-html可以把字符串当成一个html来渲染,而不是原样输出Html类似.net mvc中的@Html.Raw()方法&lt;divv-html=&quot;item.tit...