متد Get و Set متن و مقدار RadioButtonList انتخاب شده با استفاده از JQuery در Asp.Net

شنبه 16 اسفند 1393

در این مقاله نحوه گرفتن 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>

 

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید