js获取文本框,单选框,复选框,下拉列表等值
电脑版发表于:2016/10/11 17:20
html:
<form id="form1" runat="server"> <div> <table> <tr> <td>用户名: </td> <td> <input type="text" id="username" /> </td> </tr> <tr> <td>密码: </td> <td> <input type="password" /> </td> </tr> <tr> <td>性别: </td> <td> <input type="radio" name="sex" checked="checked" value="男" />男 <input type="radio" name="sex" value="女" />女 <input type="radio" name="sex" value="保密" />保密 </td> </tr> <tr> <td>爱好: </td> <td> <input type="checkbox" name="hobby" value="王者" />王者 <input type="checkbox" name="hobby" value="羽毛球" />羽毛球 <input type="checkbox" name="hobby" value="篮球" />篮球 </td> </tr> <tr> <td>工作: </td> <td> <select id="work"> <option value="1">软件工程师</option> <option value="2">UI设计师</option> <option value="6" selected="selected">挖掘机</option> <option value="7">厨师</option> </select> </td> </tr> <tr> <td> <input type="button" id="regbutton" value="注册" /> </td> </tr> </table> </div> </form>
js:
<script>
//通过id拿到按钮
var regbutton = document.getElementById("regbutton");
//绑定事件
regbutton.onclick = function () {
//获取用户名
var username = document.getElementById("username");
if (username.value == "" || username.value == null) {
alert("用户名不能为空!");
return;
}
//获取选中的性别
var sexs = document.getElementsByName("sex");
for (var i = 0; i < sexs.length; i++) {
if (sexs[i].checked) {
alert(sexs[i].value);
}
}
//获取爱好
var hobby = document.getElementsByName("hobby");
for (var i = 0; i < hobby.length; i++) {
if (hobby[i].checked) {
alert(hobby[i].value);
}
}
//获取工作
var work = document.getElementById("work");
alert(work.value);
//获取text方法1:
var options = work.getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
if (options[i].selected)
alert(work[i].text);
}
//获取text方法2:
for (var i = 0; i < work.length; i++) {
if (work[i].selected) {
alert(work[i].text);
}
}
}
</script>