当前位置:首页 > 网站制作 > JavaScript教程 > Javascript实现RadioButtonList取消选择功能

radiobuttonlist Javascript实现RadioButtonList取消选择功能

2017-01-07 | 来源:网络 | 关键字: radiobuttonlist radiobuttonlist横排
网(LieHuo.Net)教程 最近在做项目的时要实现单项选择的功能,用RadioButtonList刚好可以实现。但是遗憾的是RadioButtonList选择后不能取消。所以自己用Javascri

  网(LieHuo.Net)教程 最近在做项目的时要实现单项选择的功能,用RadioButtonList刚好可以实现。但是遗憾的是RadioButtonList选择后不能取消。所以自己用Javascript来实现取消选择的功能。

  首先,定义一个全局的数组变量,保存选择状态。

以下为引用的内容:
//保存各选项选择的状态
var arrayChecked = new Array();

  然后,注册 onload="InitChecked()"事件 ,初始化数组。这一步的目的在于加载原来已经保存过的选项时,保证其状态为选中。

www.ALONELY.com.cn
以下为引用的内容:
//初始化选择状态
function InitChecked() {
var controlID = 'radioEmpRole1';
var table = document.getElementById(controlID);
if (table) {
radioButtonList = table.getElementsByTagName('input');
for (var i = 0; i < radioButtonList .length; i++) {
if (radioButtonList .item(i).checked) {
radioButtonList [i] = 1; //被选中
}
else {
radioButtonList [i] = 0; //未被选中
}
}
}
}

  最后,为RadioButtonList注册 onclick="Checked()" 事件,选择选项时根据选项状态和历史状态来决定选项是否被取消选择。

以下为引用的内容:
//设置选择状态
function Checked() {
var controlID = 'radioEmpRole1';
var table = document.getElementById(controlID);
if (table) {
radioButtonList = table.getElementsByTagName('input');
for (var i = 0; i < radioButtonList .length; i++) {
if (radioButtonList .item(i).checked) { //此次点击,该选项被选中,则判断此选项的历史状态,若也是被选中,则会取消选择。
if (arrayChecked[i] == 1) {
radioButtonList .item(i).checked = false;
arrayChecked[i] = 0;
}
else {
arrayChecked[i] = 1;
}
}
else {
arrayChecked[i] = 0;
}
}
}
}

  通过以上三步,就可以实现点击被选择的选项时会取消选择。

评论

评论数10

表情
发表评论
网友评论仅供其表达个人看法,并不表明网易立场。
《Javascript实现RadioButtonList取消选择功能》更多评论

头条推荐

阅读下一篇

七款实用的Javascript代码高亮脚本

代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候。我们可以在显示中支持代码高亮,以便于阅读者可以十分方便的读取代码块、增加用户阅读代码的良 ... 查看全文

返回JavaScript教程 返回网站首页