숨기기 라디오 버튼 목록 입력을 기반으로 여러 영역 표시

Question

이전과 비슷한 질문이 있었지만 사용자가 마음을 바꿨으므로 수정해야했습니다. 옵션 0을 선택하면 "알림"을 표시하고 그렇지 않으면 숨김 상태로 유지해야한다는 스크립트를 작성 중입니다. 옵션 2를 선택하면 "cc"를 숨김 상태로 유지하고 그렇지 않으면 숨김 상태로 유지해야합니다. 내 문제는 이벤트가 옵션 0 또는 2에 관계없이 시작되면 두 영역이 모두 열리는 것입니다. 나는 그들에게 별도의 도움을 줄 수있는 도움을받을 수 있을지 궁금해하고 있었다. 다음은 JS입니다 :

$('#rbPType').change(function() { 
var op1 = $(this).attr('value', '0'); 
var op2 = $(this).attr('value', '2'); 

if (op1) { 
    $('#remind').fadeIn(); 
} else { 
    $('#remind').fadeOut(); 
} 

$(this).change(function() { 
    $('#remind').toggle(); 
}); 

if (op2) { 
    $('#cc').fadeIn(); 
} else { 
    $('#cc').fadeOut(); 
} 

$(this).change(function() { 
    $('#cc').toggle(); 
}); 

}); 

HTML

<div class="another"> 
<label for="rbPType">Select One</label> 
<asp:RadioButtonList runat="server" ID="rbPType" ClientIDMode="Static"> 
    <asp:ListItem Value="0" Text="1"></asp:ListItem> 
    <asp:ListItem Value="1" Text="2"></asp:ListItem> 
    <asp:ListItem Value="2" Text="3"></asp:ListItem> 
</asp:RadioButtonList> 
</div> 
<div id="remind"> 
<label for="ddlReminderMonth">Remind Me</label> 
<asp:DropDownList runat="server" ID="ddlReminderMonth" AppendDataBoundItems="true" AutoPostBack="false" /> 
</div> 
<div id="cc"> 
<label for="ddlReminderMonth">Remind Me Two</label> 
<asp:DropDownList runat="server" ID="ddlReminderMonth" AppendDataBoundItems="true" AutoPostBack="false" /> 
</div> 

Answer 1

두 개의 드롭 다운 목록을 같은 ddlReminderMonth과 같이 사용할 수 없습니다.

토글 때문에 클릭 한 후 컨트롤이 나타나고 사라집니다. Toggle은 코드를 혼란스럽게 만듭니다.

<div class="another"> 
    <label for="rbPType"> 
     Select One</label> 
    <asp:RadioButtonList runat="server" ID="rbPType" ClientIDMode="Static"> 
     <asp:ListItem Value="0" Text="1"></asp:ListItem> 
     <asp:ListItem Value="1" Text="2"></asp:ListItem> 
     <asp:ListItem Value="2" Text="3"></asp:ListItem> 
    </asp:RadioButtonList> 
</div> 
<div id="remind"> 
    <label for="ddlReminderMonth"> 
     Remind Me</label> 
    <asp:DropDownList runat="server" ID="ddlReminderMonth1" AppendDataBoundItems="true" 
     AutoPostBack="false" /> 
</div> 
<div id="cc"> 
    <label for="ddlReminderMonth"> 
     Remind Me Two</label> 
    <asp:DropDownList runat="server" ID="ddlReminderMonth2" AppendDataBoundItems="true" 
     AutoPostBack="false" /> 
</div> 


<script> 
    $('#rbPType').change(function() { 
     var value = $('#rbPType input:checked').val(); 

     if (value == '0') { 
      $('#remind').fadeIn(); 
      $('#cc').fadeOut(); 
     } 
     else if (value == '1') { 
      // Show or hide 
     } 
     else { // value == '2' 
      $('#remind').fadeOut(); 
      $('#cc').fadeIn(); 
     } 
    }); 
</script> 

Answer 2

난 당신이 여기에 불필요한 코드를 많이 작성하는 것 같아요. jquery 토글은 부울 매개 변수를 취합니다.이 매개 변수는 true 일 때 선택한 필드를 표시하고 false 일 경우 숨길 것입니다.

$('#rbPType').change(function() { 
    var op1 = $(this).attr('value', '0'); 
    var op2 = $(this).attr('value', '2'); 
    $('#remind').toggle(op1); 
    $('#cc').toggle(op2); 
    }); 

이 정보는 찾고 계신 정보입니다.