asp.netラジオボタンチェック/アンチェックの後にドロップダウンリストを表示/非表示

Question

ラジオボタンを作成しようとしましたが、チェックを外してチェックを外したときに2つのドロップダウンリストを表示/非表示にしています。

私の問題は、別のラジオボタンをチェックしようとするたびに、他のラジオボタンのドロップダウンリストが意図したとおりに隠れないことです。たとえば、rbtnTwocolorをチェックした場合、rbtnOnecolorのドロップダウンリストは非表示になりません。

ラジオボタンリストを使用したかったのですが、ラジオボタンリストアイテムの間にドロップダウンリストを挿入できませんでした。

<asp:RadioButton ID="rbtnFullColor" Text="Full-Color" runat="server" GroupName="rbtnlistColors" /><br /> 
<asp:RadioButton ID="rbtnTwoColor" Text="Two-Color" data-toggle="collapse" data-target="#twocolor" runat="server" GroupName="rbtnlistColors" /><br /> 
<div id="twocolor" class="collapse"> 
    <asp:DropDownList ID="ddlTwoColor" runat="server"></asp:DropDownList> 
</div> 
<asp:RadioButton ID="rbtnOneColor" Text="One-Color" data-toggle="collapse" data-target="#onecolor" runat="server" GroupName="rbtnlistColors" /><br /> 
<div id="onecolor" class="collapse"> 
    <asp:DropDownList ID="ddlOneColor" runat="server"></asp:DropDownList> 
</div> 

Answer 1

選択ラジオボタンは、あなたが以下の方法で使用することができます表示/非表示]ドロップダウンのために：

1：クライアント側での使用のjqueryの：

<script> 
 

 
    $(document).ready(function() { 
 

 
      $('#rbtnTwoColor').change(
 
       function() { 
 
        if ($(this).is(':checked')) { 
 
         $('#twocolor').show(); 
 
         $('#onecolor').hide(); 
 
        } 
 
       }); 
 

 
      $('#rbtnOneColor').change(
 
       function() { 
 
        if ($(this).is(':checked')) { 
 
         $('#onecolor').show(); 
 
         $('#twocolor').hide(); 
 
        } 
 
       }); 
 
    }); 
 

 
</script>

2：使用しますサーバー側イベント（OnCheckedChanged）：

マークアップ：

 <asp:RadioButton ID="rbtnFullColor" Text="Full-Color" runat="server" GroupName="rbtnlistColors" /><br /> 
 
     <asp:RadioButton ID="rbtnTwoColor" Text="Two-Color" data-toggle="collapse" data-target="#twocolor"runat="server" GroupName="rbtnlistColors" OnCheckedChanged="rbtnTwoColor_CheckedChanged" AutoPostBack="true" /><br /> 
 
     <div id="twocolor" class="collapse"> 
 
      <asp:DropDownList ID="ddlTwoColor" runat="server"></asp:DropDownList> 
 
     </div> 
 
     <asp:RadioButton ID="rbtnOneColor" Text="One-Color" data-toggle="collapse" data-target="#onecolor" runat="server" GroupName="rbtnlistColors" OnCheckedChanged="rbtnOneColor_CheckedChanged" AutoPostBack="true" /><br /> 
 
     <div id="onecolor" class="collapse"> 
 
      <asp:DropDownList ID="ddlOneColor" runat="server"></asp:DropDownList> 
 
     </div>

と背後にあるコード：

protected void rbtnTwoColor_CheckedChanged(object sender, EventArgs e) 
    { 
     ddlTwoColor.Visible = true; 
     ddlOneColor.Visible = false; 
    } 

    protected void rbtnOneColor_CheckedChanged(object sender, EventArgs e) 
    { 
     ddlOneColor.Visible = true; 
     ddlTwoColor.Visible = false; 
    } 

3：クライアント側でJavaScriptを使用します。 rbtnTwoColorにコードの下に追加は

onclick="twoColorClick()"

をラジオボタン3210

rbtnOneColorにコードの下に追加

<script> 
 

 
     function oneColorClick() { 
 
      document.getElementById('onecolor').style.display = 'block'; 
 
      document.getElementById('twocolor').style.display = 'none'; 
 
     } 
 

 
     function twoColorClick() { 
 
      document.getElementById('twocolor').style.display = 'block'; 
 
      document.getElementById('onecolor').style.display = 'none'; 
 
     } 
 

 
    </script>

このコードを追加bodyタグの終わりに今

 onclick="oneColorClick()"

をラジオボタン

幸運