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

首頁

web前端

html教學

求助HTML高手radio如何响应失去选中事件_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:35 AM

呵呵~！

我做的东西比较恶心

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

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

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

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

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

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

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

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

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

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

很郁闷

所以来问问

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

谢谢大家了

回复讨论(解决方案)

换个思路。如果改选B，那么会触发事件。这样同样可以监听A撤消啊

试试 onclick

用一个全局变量记住当前选项

<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>

<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=nullfunction cha(k){if (lastChecked==k)returnif (lastChecked!=null){	//处理obj[lastChecked]	alert("上次选中："+lastChecked)}lastChecked=k//处理obj[lastChecked]alert("本次选中："+lastChecked)}//--></script>

使用临时变量是不行的

因为页面上的选择题的数量，以及选择题和填空题

以及题目之间的跳转关系

比如：单选某一选项要跳转到哪个题
选择题之间选项的组合，选择题与填空题之间的组合

等等都是用户在设计试卷的时候指定的

不是写死在页面上的

变量可以动态创建，或用数组，不需要写死。

路过学习

用一个全局变量记住当前选项

HTML code

<script> 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(){ v… 正解！ </script>

打酱油

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

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

绝错~

你选Ａ选项以后，再去填一个空

然后回来看这个选择题，改成了选Ｂ，此时，Ａ失去选中，但不会触发失去焦点事件

我想的和２楼的思路一样

唉～

做一个调查问卷实在是太难了～

做了个测试

<!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>

恩!

谢谢大家

帖子结了

目前的思路是和xiaojing7的想法一样的

感谢大家的回复,以后有问题,我还会来骚扰大家的

谢谢

欢迎骚扰

真恶心

asdfadsasdf

function getRadio(obj) {
alert(obj.value);
var logon = document.getElementById("logon");
var reg = document.getElementById("reg");

}

1

2

没事别动不东就自动执行 onload什么的

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

HTML行動：網站結構的示例May 05, 2025 am 12:03 AM

HTML用於構建結構清晰的網站。 1)使用標籤如、、定義網站結構。 2)示例展示了博客和電商網站的結構。 3)避免常見錯誤如標籤嵌套不正確。 4)優化性能通過減少HTTP請求和使用語義化標籤。

您如何將圖像插入HTML頁面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

HTML的目的：啟用Web瀏覽器可以顯示內容May 03, 2025 am 12:03 AM

HTML的核心目的在於讓瀏覽器理解並展示網頁內容。 1.HTML通過標籤定義網頁結構和內容，如、到、等。 2.HTML5增強了多媒體支持，引入了和標籤。 3.HTML提供了表單元素，支持用戶交互。 4.優化HTML代碼可提升網頁性能，如減少HTTP請求和壓縮HTML。

為什麼HTML標籤對Web開發很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）semantictagsimproveaccessibilityandseo.2）semanteLayOut，語義和互動性。 3）poseriblesibilityandseoandseo.3）poseriblesoftagscanoftagscanoftagscanoptagscanoptimizeperefeneandimizeanDenSuroceRecRoscRoss-BrowserCrowserCercerComercompatibility。

See all articles