jQueryとラジオボタンの選択

私は（申し訳ありませんが、プログラムによるレンダリングがオフィスである）HTMLを使用するために起こっているASP.NETページがそうのようにページをレンダリングするコントロールがあります。jQueryとラジオボタンの選択

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>jQuery Radio Buttons</title> 
</head> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<body> 
<form id="form1" runat="server"> 
<div> 
    Group 1<br /> 
    <input type="radio" name="Q1" id="rb1" title="Choice 1" value="false" onclick="javascript:ClickEvent(this);" /><br /> 
    <input type="radio" name="Q1" id="rb2" title="Choice 2" value="true" onclick="javascript:ClickEvent(this);" /><br /> 
    <input type="radio" name="Q1" id="rb3" title="Choice 3" value="false" onclick="javascript:ClickEvent(this);" /><br />   
    Group 2<br /> 
    <input type="radio" name="Q2" id="rb4" title="Choice 1" value="false" onclick="javascript:ClickEvent(this);" /><br /> 
    <input type="radio" name="Q2" id="rb5" title="Choice 2" value="false" onclick="javascript:ClickEvent(this);" /><br /> 
    <input type="radio" name="Q2" id="rb6" title="Choice 3" value="true" onclick="javascript:ClickEvent(this);" /><br /> 
</div> 
</form> 
</body> 
</html> 
<script type="text/javascript"> 
function ClickEvent(r) { 

} 
</script>

私がするために必要なものClickEvent関数では、jQueryを使用してグループ（名前）を選択します。次に、間違った選択肢（value = "false"）を選択した場合、ラジオボタンの境界を赤に変更し、正解の枠線を常に緑に変更します。次に、ボタンのグループを無効にします。

これを達成するために関数定義に入れたいのは何ですか？私は、jQueryの背景についてはほとんど知りませんでしたが（私はこれについて先行していましたが、それを使用するように言われました）、私が読んだところでは "それぞれ"が正しい方法かもしれないと思います。私はまた、境界線の色を変更するために、CSSクラスの使用を気にしないように言われました。私はポストバックを使ってこれを達成することができましたが、彼らはクライアント側でなければならないと言いました。誰も助けることができますか？

p.s.これがASP.NETであるという事実はおそらく無関係です。あなたがjQueryを知っているなら、自由に回答を投稿してください。

出典

2011-07-21 Richard Porinn

この（unobstrusiveようにクリックイベントをバインドするためのマークアップおよびスクリプトを変更）してみてください。

<div> 
Group 1<br /> 
<input type="radio" name="Q1" id="rb1" title="Choice 1" value="false" /><br /> 
<input type="radio" name="Q1" id="rb2" title="Choice 2" value="true" /><br /> 
<input type="radio" name="Q1" id="rb3" title="Choice 3" value="false" /><br />   
Group 2<br /> 
<input type="radio" name="Q2" id="rb4" title="Choice 1" value="false" /><br /> 
<input type="radio" name="Q2" id="rb5" title="Choice 2" value="false" /><br /> 
<input type="radio" name="Q2" id="rb6" title="Choice 3" value="true" /><br /> 
</div> 


<script type="text/javascript"> 
    $(function(){ 
    $("div :radio").click(ClickEvent); 
    }); 
    function ClickEvent(){ 
      var el = this; 
      var $el = $(el); 
      if($el.val() == "false"){ 
       var all = $("[name='" + $el.attr("name") + "']"); 
       var correctRadio = all.filter("[value='true']"); 
       correctRadio.wrap("<span style='border: solid Green 2px'></span>"); 
       $el.wrap("<span style='border: solid Red 2px'></span>"); 
       all.prop("disabled", true); 
      } 
     } 


</script>

の作業例を：http://jsfiddle.net/bJx5y/2/

出典

2011-07-21 23:32:26 Chandu

私は十分に感謝することはできません！最初の選択が真であればあなたのコードに基づいてelseステートメントを追加しましたが、あなたの例がなければそれを実行できませんでした。再度、感謝します！ –

jQueryとラジオボタンの選択

答えて

関連する問題