در این مقاله نحوه گرفتن Text و Value از RadioButtonList با استفاده از JQuery و همچنین Set کردن item انتخاب شده در RadioButtonList از طریق Value و Text را شرح می دهیم

ابتدا تگ های HTML مربوطه را در یک صفحه Asp.Net قرار می دهیم . سپس سه دکمه نیز در صفحه قرار می دهیم .

 <h1>برنامه نویسان</h1>
    <asp:RadioButtonList ID="rblFruits" runat="server">
        <asp:ListItem Text="Asp.Net" Value="1" />
        <asp:ListItem Text="Html" Value="2" />
        <asp:ListItem Text="MVC" Value="3" Selected="True" />
        <asp:ListItem Text="Css" Value="4" />
    </asp:RadioButtonList>
<asp:Button ID="btnGet" Text="Get Selected Value" runat="server" />
<asp:Button ID="btnSet_Text" Text="Set Selected Text" runat="server" />
<asp:Button ID="btnSet_Value" Text="Set Selected Value" runat="server" />

کنترل RadioButtonList به عنوان یک جدول ClientSide در مرورگر کاربر ارائه میشود .هر سطر RadioButtonList شامل یک Table Cell به همراه Label Element می باشد .

هر RadioButton شامل قسمت Value در حالی که Label Element آن مقدار Text آنرا در بر می گیرد .

نحوه Get کردن متن و مقدار RadioButton انتخاب شده در Asp.Net با استفاده از JQuery :

هنگامی که دکمه btnGet کلیک می شود , رویداد JQuery مربوط به آن اجرا میشود .در ابتدا مرجع بررسی می کند که کدام RadioButton در RadioButtonList کلیک شده است , سپس مقدار آن در یک متغیر ذخیره میشود .برای قسمت Text عناصر مرتبط با آن انتخاب می شود و در یک متغیر ذخیره میشود .

و در آخر Text و Value قسمت انتخاب شده از RadioButtonList با استفاده از پیغام نمایشی در java Script نمایش داده می شود .

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("[id*=btnGet]").click(function () {
        var checked_radio = $("[id*=rblFruits] input:checked");
        var value = checked_radio.val();
        var text = checked_radio.closest("td").find("label").html();
        alert("Text: " + text + " Value: " + value);
       return false;
    });
});
</script>

نحوه Set کردن آیتم انتخابی RadioButtonList در Asp.Net بر اساس Text Using JQuery

هنگامی که دکمه btnSet کلیک می شود  , رویداد JQuery اجرا میشود . سپس با label همراه هر RadioButton به استفاده از Jquery Contain Selector مقدار و محتوای RadioButton انتخاب شده از RadioButtonList تضخیص داده میشود  .

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("[id*=btnSet_Text]").click(function () {
        var text = "Mango";
        var radio = $("[id*=rblFruits] label:contains('" + text + "')").closest("td").find("input");
        radio.attr("checked", "checked");
        return false;
    });
});
</script>

نحوه Set کردن آیتم انتخاب شده از RadioButtonList در Asp.Net بر اساس مقدار با استفاده از Jquery :

زمانی که دکمه btnSet Value کلیک می شود .JQuery مورد نظر اجرا میشود و RadioButton انتخاب شده از RadioButtonList بر اساس Value آن تشخیص داده می شود.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("[id*=btnSet_Value]").click(function () {
        var value = "2";
        var radio = $("[id*=rblFruits] input[value=" + value + "]");
        radio.attr("checked", "checked");
        return false;
    });
});
</script>