찾다
웹 프론트엔드HTML 튜토리얼求助HTML高手radio如何响应失去选中事件_html/css_WEB-ITnose


呵呵~!

我做的东西比较恶心

现在遇到了个问题就是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> <br /> var cur; <br /> <br /> function check(){ <br /> var val; <br /> var rds = document.forms[0].rd; <br /> for(var i=0;i<rds.length;i++){ <br /> if(rds[i].checked){ <br /> val = i; <br /> break; <br /> } <br /> } <br /> if(val != cur){cur = val; alert("changed")} <br /> } <br /> window.onload=function(){ <br /> v… <br /> <br /> 正解! </script>

打酱油

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

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

绝错~

你选A选项以后,再去填一个空

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

我想的和2楼的思路一样

唉~

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

做了个测试

<!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으로 문의하세요.
& lt; Progress & Gt의 목적은 무엇입니까? 요소?& lt; Progress & Gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; datalist & gt의 목적은 무엇입니까? 요소?& lt; datalist & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; meter & gt의 목적은 무엇입니까? 요소?& lt; meter & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?Mar 20, 2025 pm 05:56 PM

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?Mar 20, 2025 pm 06:05 PM

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.