-- 作者:admin
-- 发布时间:2016/11/28 19:34:48
-- [推荐]常见表单选择控件的选中内容读取方法
完整代码请下载附件文本内容:
获取单选列表框的选中内容 <html> <head> <meta charset="UTF-8"> <title>Form validation</title> <script type="text/JavaScript"> function display(form) { var myselect = document.getElementById("selCards"); var index = myselect.selectedIndex; alert(myselect.options[index].text); } </script> </head> <body>
<form name="frmCards" action="cards.asp" method="get" > <select name="selCards" id="selCards" size="6"> <option>选择你的发牌花色</option> <option value="hearts">红桃</option> <option value="diamonds">方块</option> <option value="spades">黑桃</option> <option value="clubs">梅花</option> </select> <input type="submit" value="显示"/> </form>
</body> </html>
获取单选列表框的多选内容 <html> <head> <meta charset="UTF-8"> <title>Form validation</title> <script type="text/JavaScript"> function display(form) { var myselect = document.getElementById("selCards"); var len = myselect.options.length; var result = ""; var opt; for (var i = 0; i < len; i++) { opt = myselect.options[i]; if (opt.selected) result = result + opt.text + ";"; } alert(result); } </script> </head> <body>
<form name="frmCards" action="cards.asp" method="get" > <select name="selCards" id="selCards" size="6" multiple="multiple"> <option>选择你的发牌花色</option> <option value="hearts">红桃</option> <option value="diamonds">方块</option> <option value="spades">黑桃</option> <option value="clubs">梅花</option> </select> <input type="submit" value="显示"/> </form>
</body> </html>
获取选中的单选按钮内容 <html> <head> <meta charset="UTF-8"> <title>Form validation</title> <script type="text/JavaScript"> function display(form) { var radioButtons = form.radSuit; for (var i = 0; i < radioButtons.length; i++) { if (radioButtons[i].checked) { alert(radioButtons[i].nextSibling.nodeValue); break; } } } </script> </head> <body>
<form name="frmCards" action="cards.aspx" method="post" > <p>选择你的发牌花色</p>
<p><input type="radio" name="radSuit" value="hearts"/> 红桃 </p>
<p><input type="radio" name="radSuit" value="diamonds"/> 方块 </p>
<p><input type="radio" name="radSuit" value="spades"/> 黑桃 </p>
<p><input type="radio" name="radSuit" value="clubs"/> 梅花 </p>
<p><input type="submit" value="提交"/></p> </form>
</body> </html>
获取选中的复选按钮内容 <html> <head> <meta charset="UTF-8"> <title>Form validation</title> <script type="text/JavaScript"> function display(field) { var result = ""; for (var i = 0; i < field.length; i++) { if (field[i].checked) result = result + field[i].nextSibling.nodeValue + ";" } alert(result); }
</script> </head> <body>
<form name="frmCards" action="cards.aspx" method="post" > <p>选择你的发牌花色</p>
<p><input type="checkbox" name="chkSuit" value="hearts"/> 黑桃 </p>
<p><input type="checkbox" name="chkSuit" value="diamonds"/> 方块 </p>
<p><input type="checkbox" name="chkSuit" value="spades"/> 黑桃 </p>
<p><input type="checkbox" name="chkSuit" value="clubs"/> 梅花 </p>
<p><input type="submit" value="提交"/></p> </form>
</body> </html>
[此贴子已经被作者于2016-11-28 19:37:01编辑过]
|