您的位置：首页 > Web前端 > JavaScript

用JavaScript 获得 radio 和 select 当前选中的值 --依然附带两段原创英文

2010-06-26 03:44 435 查看

非常简单的东西。。但由于之前没有用单纯JavaScript 的经验（谁能给我个比较好听的词来表示单纯的JavaScript 而不是依托于其他插件或者框架的

确实还是研究了一下下才写出来。

先来看HTML

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Use JavaScript to get radio and select value</title>

<script type="text/javascript" src="http://www.cnblogs.com/../JSUtils.js"></script>

</head>
<body>
<fieldset>
<legend>Get Radio Value</legend>
<input name="Radio" type="radio" value="male" />Male
<input name="Radio" type="radio" value="female" />Female
<input name="GetRadioValue" type="button" onclick="alert(JS.GetRadioValue('Radio'));"
value="Get radio value" />
</fieldset>
<fieldset>
<legend>Get Select Value</legend>
<select id="Select" name="Select">
<option>Select a number</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input name="GetSelectValue" type="button" onclick="alert(JS.GetSelectValue('Select'))"
value="Get select value" />
</fieldset>
</body>
</html>

效果如下：

呃。。我本来是想先阐述下流程然后再附上JS代码的。。

不过大概这个东西流程太简单了。。所以我还是直接把代码贴出来了然后说明写在了注释里

var JS = {  //我喜欢把一些相关的方法写到一个静态JS对象里 我认为这样会使VS得智能感知对我们比较友善
//如果对封装不明白的 请看 这里

IsNullOrEmpty:function(str){    //这是一个工具方法，用来判断一个字符串是否未定义，或为空，或为空字符串

if(typeof(str)=="undefined") return true;   //这具如果有疑问的话 可以看我下面的说明

if(str==null) return true;
if(str=="") return true;
return false;
},//IsNullOrEmpty
GetRadioValue:function(radioName)   //获得单选框当前选中的值的方法，
//为了方便以后使用 所以我把 单选框的Name属性作为了一个参数
{
var radios = document.getElementsByName(radioName);
//这里我们用 getElementsByName 来获得所有的单选框，因为单选框一般都是2个或2个以上为一组出现的

for(var i = 0 ; i< radios.length;i++)//遍历丫的。。。
{
var radio = radios.item(i);//这里也可以写成 var radio = radios[i]
//但是我在下面提出了一个疑问 希望高手解答

if(radio.checked)
{
if(JS.IsNullOrEmpty(radio.value)) return undefined;//无论当前选中的值是 未定义 还是空 还是空字符串
//我都把他们的返回值统一设置为 undefined
//我觉得这样做的话，以后使用这个方法的时候比较方便
return radio.value;
}
}
return undefined;//最后 如果没有任何一个单选框被选中的话 返回 undefined
},//GetRadioValue
GetSelectValue:function(selectId)//获得下拉列表当前选中的值的方法，
//为了方便以后使用 所以我把 下拉列表的ID属性作为了一个参数
{
var select = document.getElementById(selectId);

var options = select.options;//这样可以让我们获得该下拉列表的所有选项

for(var i = 0 ; i<options.length ;i++)//依然遍历丫的
//之后做的基本和前一个方法一样了
//注意 radio的是否选中 是checked属性 select则是 selected属性
{
var option = options[i];

if(option.selected)
{
if(JS.IsNullOrEmpty(option.value)) return undefined;

return option.value;
}
}
return undefined;
}//GetSelectValue
}

[b] 改正一下：[/b]

我把GetSelectValue(selectId)这个方法想复杂了其实只要这样就可以了谢谢 seagreen7 JayChow

GetSelectValue:function(selectId)
{
var select = document.getElementById(selectId);

if(JS.IsNullOrEmpty(select.value))
{
return undefined;
}
else
{
return select.value;
}
},//GetSelectValue

[b]关于 underfined:[/b]

　　underfined 在 javascript中表示未定义。

例如：

var aaa;
alert(aaa);

这个时候就会输出 undefined.

但是判断一个变量的值是否为 underfinded 不能使用

aaa==underfined 或者 aaa=="underfined" 而要使用 typeof(aaa)=="underfined";

至于更具体的原因请看这里的一篇文章

[b]关于radios.item(i)的疑问[/b]

　　我们可以对 getElementsByName 返回的集合使用 radios.item(i) 或者 radios[i],

但是如果我们像这样定义一个数组 var arr = [1,2,3,4,5];

好像就只能使用 radios[i] 而不能使用 arr.item(i);

也就是说 getElementsByName 返回的不是一个数组？那他返回的是什么呢。。求解

----------------------------------------------------------------分割线--------------------------------------------------------------------

附上两端今天最新原创的英文

1.今天老外boss 终于发了个工作给我。。大概就是给几个按钮的事件里加上同一个功能。。

本来就是很简单的工作。结果看过代码之后更是发现其实他要的功能之前已经存在了。。我只要注释掉几行语句就能搞定。。

10分钟完成。。交给他审查但是大概因为高兴过头了。。居然落下了一个按钮没改。。。被他发现了。

修正之后，我对他这样说：

　　im sorry sir,im too impatient for success just now.--- 不好意思，我刚才有点急于求成了

　　and i fixed it now.--- 我现在已经把它改正了

　　you can look it again.---你可以再去看一下

2.我刚到公司才几天，公司让我和一个老员工Wang一起工作，这样他可以带着点我，

之前语音通话安排任务的时候都是 boss,wang,我一起参与的,安排wang的任务的时候也是这样。

但是今天他给了我第一份独立任务后。。这种会议就变成都是1对1进行了。。我觉得这样对我来说有点困难。

所以我就对BOSS说：

　　sir ---称呼一下。。
　　when we voice call.---当我们语音通话的时候
　　can we three are all join it as we were before?---能不能我们3个全都参与，就像我们之前一样？
　　i think it will contribute to i adapt english.---我认为这样有助于我适应英文
　　and i need wang to help me confirm task so far.---而且到目前为止，我需要wang帮助我确认下任务。

这里写的内容相当基础，只提供新手参考。。但是切勿全信。。。尤其是英文部分。。

内容中如果有错误或者有疑问的话欢迎高手们指点但是也请嘴下留情键盘下留情手写板下留情总之千万不要喷我谢谢

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航