jQuery를 사용하여 ASP : Radiobuttonlist에서 선택한 값 읽기
-
08-07-2019 - |
문제
다음과 비슷한 코드가 있습니다 ...
<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>
라디오 목록 BlbuffetmealFaciilities : CHK가 클라이언트 측면을 변경하고 jQuery의 Hasbuffet Div에서 슬라이드 다운 기능을 수행 할 때 이벤트를 캡처하고 싶습니다. 이를 만들기 가장 좋은 방법은 무엇입니까?
해결책
이것:
$('#rblDiv input').click(function(){
alert($('#rblDiv input').index(this));
});
클릭 한 라디오 버튼의 색인을 얻을 수 있습니다.
그런 다음이를 사용하여 다음과 같이 해당 DIV를 표시 할 수 있습니다.
$('.divCollection div:eq(' + $('#rblDiv input').index(this) +')').show();
그게 당신이 의미 하는가?
편집 : 또 다른 접근 방식은 RBL에 클래스 이름을 제공 한 다음 다음과 같습니다.
$('.rblClass').val();
다른 팁
Radiobuttonlist1의 점검 된 값을 검색하는 간단한 방법은 다음과 같습니다.
$('#RadioButtonList1 input:checked').val()
Tim에 의해 편집 :
어디 RadioButtonList1
Radiobuttonlist의 ClientId 여야합니다
var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked");
이것은 나를 위해 일했다 ...
<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?");
}
});
});
중요한 부분 :$ ( "입력 [name = '<%= intent.uniqueId%>'] : radio : checked"). val ();
나에 따르면 그것은 잘 작동 할 것입니다 ...
이것으로 시도하십시오
var GetValue=$('#radiobuttonListId').find(":checked").val();
radiobuttonlist 값은 GetValue (변수)에 저장됩니다.
라디오 버튼 대신 라디오 버튼 목록은 고유 한 ID 태그 이름 _0, name_1 등을 만듭니다. 선택한 테스트 방법은 CSS 클래스와 같은 CSS 클래스를 할당하는 것입니다.
var deliveryService;
$('.deliveryservice input').each(function () {
if (this.checked) {
deliveryService = this.value
}
이 시도:
$("input[name='<%=RadioButtonList1.UniqueID %>']:checked").val()
다음은 결국 우리가 만든 코드입니다. 먼저 Breif 설명. 우리는 라디오 버튼 질문 목록 주위에 싸인 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>
Andrew Bullock Solution은 잘 작동합니다. 단지 당신에게 광산을 보여주고 경고를 추가하고 싶었습니다.
// 잘 작동합니다
$('#<%= radBuffetCapacity.ClientID %> input').click(function (e) {
var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val();
//Do whatever
});
// 경고 - Firefox에서 작동하지만 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가 별도의 파일에 있었으므로 ClientID 응답 출력을 사용하는 것이 도움이되지 않았습니다. 놀랍게도 솔루션은 Radiobuttonlist에 CSSCLASS를 추가하는 것만 큼 간단했습니다. DevCurry
해당 솔루션이 사라지는 경우 라디오 버튼 목록에 클래스를 추가하십시오.
<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());
});
});
다시 말하지만, 이것은 위에서 언급 한 "ClientID"를 사용하지 않으며 시나리오에서 지저분한 것으로 나타났습니다. 도움이 되었기를 바랍니다!
왜 그렇게 복잡합니까?
$('#id:checked').val();
잘 작동합니다!
간단한 해결책을 찾았습니다.
var Ocasiao = "";
$('#ctl00_rdlOcasioesMarcas input').each(function() { if (this.checked) { Ocasiao = this.value } });