HTML高手radio怎么响应失去选中事件

求助HTML高手radio如何响应失去选中事件

呵呵~！

我做的东西比较恶心

现在遇到了个问题就是input的radio控件响应事件问题

是这样：一个radio不光要响应被选中的事件，还要监听自己被撤销选中的事件

比如我有个选择题，A，B，C三个选项

用户在页面先选了A，根据某些业务逻辑，选了A以后是要进行一些相关操作的

但是这时候用户想了一下，觉得选A不好，改选B了

那么刚才根据用户选了A这一结果执行的操作，就要实现逆操作

我想设置radio的 onpropertychange事件来实现这个操作，但是发现把JavaScript方法注册到事件上以后

用户点中radio的时候，浏览器调用了2次该方法

而且似乎是在radio的checked属性被设置为true之前调用一次，设置为true之后调用一次

而当选了同组其他radio的时候，这个方法只执行了一次

很郁闷

所以来问问

有没有方法监听radio控件被选中和被撤销的事件啊？

谢谢大家了

------解决方案--------------------
换个思路。如果改选B，那么会触发事件。这样同样可以监听A撤消啊
------解决方案--------------------
用一个全局变量记住当前选项

HTML code


<html> 
<script language="javascript" defer="defer"> 
var cur;

function check(){
    var val;
    var rds = document.forms[0].rd;
    for(var i=0;i<rds.length;i++){
        if(rds[i].checked){
            val = i;
            break;    
        }    
    }
    if(val != cur){cur = val; alert("changed")}
} 
window.onload=function(){
    var rds = document.forms[0].rd;
    for(var i=0;i<rds.length;i++){
        if(rds[i].checked){
            cur = i;
            break;    
        }    
    }
}
</script> 
<body>
<form>
<input type="radio" name="rd" value="0" checked="checked" onclick="check()"> 0<br>
<input type="radio" name="rd" value="1" onclick="check()"> 1<br>
<input type="radio" name="rd" value="2" onclick="check()"> 2<br>
</form>
</body> 
</html>

------解决方案--------------------

HTML code


<div id=radios>
 a <input type=radio name=a value=a >
 b <input type=radio name=a value=b>
 c <input type=radio name=a value=c>
</div>
<script language="javascript">
<!--
var obj=document.getElementById("radios").getElementsByTagName("input")
for (var i=0;i<obj.length;i++){
(function(k){obj[i].onclick=function(){cha(k)}})(i)
}
var lastChecked=null
function cha(k){
if (lastChecked==k)return
if (lastChecked!=null){
    //处理obj[lastChecked]
    alert("上次选中："+lastChecked)
}
lastChecked=k
//处理obj[lastChecked]
alert("本次选中："+lastChecked)
}
//-->
</script>

------解决方案--------------------

失去选中,也即失去焦点,那么失去焦点的事件可以在对象中这样响应
...onblur="javascript:workFunName(参数);"...

------解决方案--------------------

做了个测试

HTML code


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>
<form method="post" action="">
    <input type="radio" name="ask1" id="a1" value="v1" />a1
    <input type="radio" name="ask1" id="a2" value="v2" />a2
    <input type="radio" name="ask1" id="a3" value="v3" />a3
</form>
</body>
<script type="text/javascript">
//<![CDATA[
function a1(){
    alert('a1 ....   do something');
}
function a2(){
    alert('a2 ....  do something');
}
function a3(){
    alert('a3 ....   do something ');
}
function setradio(oname, v, fn){
    var rdos = document.getElementsByName(oname);
    for ( var i=0,L=rdos.length; i<L; i++ ) {
        if ( rdos[i].value==v ) {
            rdos[i].onclick = function(){
                fn();
            };
        }
    }
}

setradio('ask1', 'v1', a1);
setradio('ask1', 'v2', a2);
setradio('ask1', 'v3', a3);
//]]>
</script>
</html>

HTML高手radio怎么响应失去选中事件

相关推荐