javascript 获取 radio、checkbox及select的值

最新推荐文章于 2022-02-18 11:25:53 发布

原创最新推荐文章于 2022-02-18 11:25:53 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

JAVA 专栏收录该内容

332 篇文章

订阅专栏

本文通过一个具体的HTML页面实例介绍了如何使用JavaScript来获取表单元素的状态，包括单选按钮、复选框和下拉菜单的选择情况，并展示了如何通过按钮触发这些状态的显示。

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT language="javascript">
function selectradio()
{
var rrr = document.getElementsByName("radio1");
var flag = true;
for(var i=0;i<rrr.length;i++)
{
if(rrr[i].checked)
{
alert(rrr[i].value);
flag = false;
}
}
if(flag){
alert("not checked");
}
}
function selectcheck()
{
alert(form.checkbox1.checked);
var ccc = document.getElementsByName("checkbox1");
var str='';
for(var i=0;i<ccc.length;i++)
{
if(ccc[i].checked)
{
str+=ccc[i].value+",";
}
}
alert(str);
}
function selectselect()
{
var sss = document.getElementById("select1");
alert(sss.options[sss.selectedIndex].text+" : "+sss.options[sss.selectedIndex].value);
}
</SCRIPT>
</HEAD>

<BODY>
<DIV align="center">
<FORM name="form">
<p>
<INPUT type="radio" name="radio1" value="111" >
111
<INPUT type="radio" name="radio1" value="222" >
222
<INPUT type="radio" name="radio1" value="333" >
333
<INPUT type="radio" name="radio1" value="444" >
444
<input type="button" name="Submit2" value="按钮" onClick="selectradio();">
</p>
<p>
<input type="checkbox" name="checkbox1" value="111">
<input type="checkbox" name="checkbox1" value="222">
<input type="button" name="Submit" value="按钮" onClick="selectcheck();">
</p>
<p>
<select name="select" id="select1">
<option value="111">第一项</option>
<option value="222">第二项</option>
<option value="333">第三项</option>
<option value="444">第四项</option>
</select>
<input type="button" name="Submit3" value="按钮" onClick="selectselect();">
</p>

<input type="text" name="aaaaaa" value="value"/>

</FORM>
</DIV>
</BODY>
</HTML>