ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML エキスパート ラジオが失われた選択への対応方法を支援します。event_html/css_WEB-ITnose

HTML エキスパート ラジオが失われた選択への対応方法を支援します。event_html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 09:35:51
オリジナル
1000 人が閲覧しました

はは〜!

私が作ったものはかなりひどいものです

さて、入力ラジコンがイベントに応答するという問題に遭遇しました

これがこれです: ラジオは選択されたイベントに応答する必要があるだけでなく、イベントをリッスンする必要もありますたとえば、A、B、C の 3 つの選択肢がある多肢選択式の質問があります。
ユーザーは、最初にページ上で A を選択しました。あるビジネス ロジックによれば、A を選択した後、関連する操作がいくつか実行される必要があります。実行されました

しかし、このときユーザーは少し考えましたが、A を選択するのはよくないと感じたので、代わりに B を選択しました

次に、ユーザーが A を選択した結果に基づいて実行された操作を元に戻す必要があります

この操作を実装するためにラジオの onpropertychange イベントを設定したかったのですが、イベントに登録した後、JavaScript メソッド

ユーザーがラジオをクリックすると、ブラウザはこのメソッドを 2 回呼び出します

そして、それが行われるようですラジオの selected 属性が true に設定される前に 1 回呼び出され、true に設定された後に 1 回呼び出されます

が選択されています 同じグループ内の他のラジオを選択するとき、このメソッドは 1 回しか実行されませんでした

非常にイライラします

質問させてください

ラジコンの選択と取り消しのイベントを監視する方法はありますか?

皆さんありがとうございます




ディスカッションに返信(解決策)
考えを変えてください。代わりに 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> 
ログイン後にコピー

一時変数の使用は不可能です

複数選択の数のためページ上の質問、多肢選択問題と穴埋め問題の数


、質問間のジャンプ関係

例: 特定のオプションを選択した場合にどの質問にジャンプするか
オプションの組み合わせ多肢選択問題の間、多肢選択問題と穴埋め問題の組み合わせ

など。テスト用紙をデザインするときにユーザーによって指定されます

ページ上にハードコーディングされません

変数動的に作成することも、配列を使用することもでき、ハードコーディングする必要はありません。

学習のため通り過ぎます

現在のオプションを記憶するためにグローバル変数を使用します

人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート