asp에서 선택한 값 읽기:jQuery를 사용한 라디오 버튼 목록

asp에서 선택한 값 읽기:jQuery를 사용한 라디오 버튼 목록

다음과 유사한 코드가 있습니다.

<p><label>Do you have buffet facilities?</label>
  <asp:RadioButtonList ID="blnBuffetMealFacilities:chk" runat="server">
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
    <asp:ListItem Text="No" Value="0"></asp:ListItem>
  </asp:RadioButtonList></p>
<div id="HasBuffet">
  <p><label>What is the capacity for the buffet?</label>
  <asp:RadioButtonList ID="radBuffetCapacity" runat="server">
    <asp:ListItem Text="Suitable for upto 30 guests" value="0 to 30"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 50 guests" value="30 to 50"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 75 guests" value="50 to 75"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 100 guests" value="75 to 100"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 150 guests" value="100 to 150"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 250 guests" value="150 to 250"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 400 guests" value="250 to 400"></asp:ListItem>
  </asp:RadioButtonList></p>
</div>

라디오 목록 blBuffetMealFacilities:chk가 클라이언트 측을 변경할 때 이벤트를 캡처하고 jQuery의 HasBuffet div에 대해 슬라이드다운 기능을 수행하려고 합니다.페이지에 몇 개의 유사한 섹션이 있다는 것을 염두에 두고, 라디오 목록에서 예 아니오 대답에 따라 질문이 공개되기를 원하는 이 페이지를 만드는 가장 좋은 방법은 무엇입니까?

RadioButtonList1의 선택된 값을 검색하는 간단한 방법은 다음과 같습니다.

$('#RadioButtonList1 input:checked').val()

팀별 편집:

어디에RadioButtonList1클라이언트여야 합니다.라디오 버튼 목록의 ID

var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked"); 

다음 항목:

$('#rblDiv input').click(function(){
    alert($('#rblDiv input').index(this));
});

클릭된 라디오 버튼의 인덱스를 얻을 것입니다(내 생각에는 테스트되지 않았습니다). (참고로 RBL을 #rblDiv로 포장해야 했습니다.

그런 다음 이를 사용하여 다음과 같이 해당 div를 표시할 수 있습니다.

$('.divCollection div:eq(' + $('#rblDiv input').index(this) +')').show();

그게 당신이 말한 뜻입니까?

편집: 또 다른 접근 방식은 rbl에 클래스 이름을 지정한 다음 다음,

$('.rblClass').val();

이건 나한테 효과가 있었어요

<asp:RadioButtonList runat="server" ID="Intent">
  <asp:ListItem Value="Confirm">Yes!</asp:ListItem>
  <asp:ListItem Value="Postpone">Not now</asp:ListItem>
  <asp:ListItem Value="Decline">Never!</asp:ListItem>
</asp:RadioButtonList>

처리기:

$(document).ready(function () {
  $("#<%=Intent.ClientID%>").change(function(){
   var rbvalue = $("input[name='<%=Intent.UniqueID%>']:radio:checked").val();

   if(rbvalue == "Confirm"){
    alert("Woohoo, Thanks!");
   } else if (rbvalue == "Postpone"){
    alert("Well, I really hope it's soon");
   } else if (rbvalue == "Decline"){
    alert("Shucks!");
   } else {
    alert("How'd you get here? Who sent you?");
   }
  });
});

중요한 부분: $("input[name='<%=)의도.고유 ID %>']:radio:checked").val();

제 말에 따르면 잘 될 겁니다

이걸로 해보세요.

   var GetValue=$('#radiobuttonListId').find(":checked").val();

---

GetValue(Variable)에 저장할 라디오 버튼 목록 값.

Radio 버튼 대신 Radio 버튼 목록을 사용하면 name_0, name_1 등의 고유 ID 태그가 생성됩니다.선택된 것을 테스트하는 쉬운 방법은 css 클래스를 할당하는 것입니다.

var deliveryService;
$('.deliveryservice input').each(function () {
    if (this.checked) {
        deliveryService = this.value
    }

사용해 보십시오.

$("input[name='<%=RadioButtonList1.UniqueID %>']:checked").val()

다음은 우리가 결국 만든 코드입니다.간단한 설명이 먼저입니다.우리는 라디오 버튼 질문 목록에 둘러싸인 div 이름에 "q_"를 사용했습니다.그런 다음 모든 섹션에 대해 "s_"를 사용했습니다.다음 코드는 질문을 반복하여 선택한 값을 찾은 다음 관련 섹션에서 슬라이드 작업을 수행합니다.

var shows_6 = function() {
  var selected = $("#q_7 input:radio:checked").val();
  if (selected == 'Groom') {
    $("#s_6").slideDown();
  } else {
    $("#s_6").slideUp();
  }
};
$('#q_7 input').ready(shows_6);
var shows_7 = function() {
  var selected = $("#q_7 input:radio:checked").val();
  if (selected == 'Bride') {
    $("#s_7").slideDown();
  } else {
    $("#s_7").slideUp();
  }
};
$('#q_7 input').ready(shows_7);
$(document).ready(function() {
  $('#q_7 input:radio').click(shows_6);
  $('#q_7 input:radio').click(shows_7);
});

<div id="q_7" class='question '><label>Who are you?</label> 
  <p>
    <label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0">Bride</label>
    <input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Bride" />
  </p> 
  <p>
    <label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1">Groom</label>
    <input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Groom" />
  </p> 

</div> 

다음은 우리가 질문을 필수로 만들 수 있게 해줍니다...

<script type="text/javascript"> 
var mandatory_q_7 = function() {
  var selected = $("#q_7 input:radio:checked").val();
  if (selected != '') {
    $("#q_7").removeClass('error');
  }
};
$(document).ready(function() {
    $('#q_7 input:radio').click(function(){mandatory_q_7();});
});
</script> 

다음은 실제 표시/숨기기 레이어의 예입니다.

<div class="section" id="s_6"> 
    <h2>Attire</h2> 
    ...
</div>

다음 코드를 사용해 보십시오.

<script type="text/javascript">
    $(document).ready(function () {

        $(".ratingButtons").buttonset();

    });
 </script>


<asp:RadioButtonList ID="RadioButtonList1" RepeatDirection="Horizontal" runat="server"
            AutoPostBack="True" DataSourceID="SqlDataSourceSizes"     DataTextField="ProdSize"
            CssClass="ratingButtons" DataValueField="_ProdSizeID" Font-Size="X-Small" 
            ForeColor="#666666">
</asp:RadioButtonList>

왜 그렇게 복잡하죠?

$('#id:checked').val();

잘 될 거예요!

Andrew Bullock 솔루션은 잘 작동합니다. 제 솔루션을 보여드리고 경고를 추가하고 싶습니다.

//잘 작동함

$('#<%= radBuffetCapacity.ClientID %> input').click(function (e) {
   var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val();
   //Do whatever
});

//경고 - 파이어폭스에서는 작동하지만 IE8에서는 작동하지 않습니다... IE8에서는 작동하지 않는다는 것을 알아차리기 전에 한동안 사용했습니다...하나로 작업할 때 jQuery로 모든 브라우저에서 작동하는 모든 것에 사용됩니다.

$('#<%= radBuffetCapacity.ClientID %>').change(function (e) {
   var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val();
   //Do whatever
});

저는 가치를 얻기 위해 Vinh의 답변에 투표했습니다.

해당 레이블을 찾아야 하는 경우 다음 코드를 사용할 수 있습니다.

$('#ClientID' + ' input:checked').parent().find('label').text()

제 시나리오에서는 JS가 별도의 파일에 있었기 때문에 클라이언트를 사용했습니다.ID 응답 출력이 유용하지 않습니다.놀랍게도, 그 해결책은 내가 DevCurry에서 알게 된 라디오 버튼 목록에 CssClass를 추가하는 것만큼 간단했습니다.

해당 솔루션이 사라질 경우 라디오 단추 목록에 클래스 추가

<asp:RadioButtonList id="rbl" runat="server" class="tbl">...

이 기사에서 지적했듯이 라디오 버튼 목록이 렌더링되면 클래스 "tbl"이 주변 테이블에 추가됩니다.

<table id="rbl" class="tbl" border="0">
<tr>...

이제 추가된 CSS 클래스 때문에, 당신은 입력을 참조할 수 있습니다: CSS 클래스 선택기를 기반으로 테이블 내의 라디오 항목.

$(function () {
            var $radBtn = $("table.tbl input:radio");
            $radBtn.click(function () {
                var $radChecked = $(':radio:checked');
                alert($radChecked.val());
            });
        });

이렇게 하면 "클라이언트"를 사용할 수 없습니다.위에서 언급한 "ID"는 제 시나리오에 대해 지저분하다는 것을 알게 되었습니다.이것이 도움이 되길 바랍니다!

간단한 해결책을 찾았습니다. 다음을 시도해 보십시오.

var Ocasiao = "";    
$('#ctl00_rdlOcasioesMarcas input').each(function() { if (this.checked) { Ocasiao = this.value } });

언급URL : https://stackoverflow.com/questions/308301/reading-the-selected-value-from-aspradiobuttonlist-using-jquery