{"id":127,"date":"2020-06-02T21:41:24","date_gmt":"2020-06-02T21:41:24","guid":{"rendered":"http:\/\/bahadirmeric.net\/bahadir\/?p=127"},"modified":"2020-06-02T21:41:24","modified_gmt":"2020-06-02T21:41:24","slug":"javascript-ile-radio-buton-list-nesnesinden-deger-almak","status":"publish","type":"post","link":"http:\/\/bahadirmeric.net\/bahadir\/2020\/06\/02\/javascript-ile-radio-buton-list-nesnesinden-deger-almak\/","title":{"rendered":"JavaScript ile Radio Buton List Nesnesinden De\u011fer Almak"},"content":{"rendered":"\n<p>Bazen yazd\u0131\u011f\u0131m uygulamalarda C# form taraf\u0131nda yer alan Radio Buton List gibi bir nesne i\u00e7erisinde yer alan se\u00e7eneklerden se\u00e7ilen de\u011feri al\u0131p i\u015flem yapt\u0131rmak gerekebiliyor. Bu sebepten de sizlere JavaScript taraf\u0131nda en k\u0131sa yoldan bu i\u015flemi nas\u0131l yapar\u0131z onu yazmaya \u00e7al\u0131\u015ft\u0131m. \ud83d\ude42 Benim burada anlataca\u011f\u0131m y\u00f6ntem iki t\u00fcrl\u00fc olacak hatta \u00f6rnek kodunu payla\u015faca\u011f\u0131m y\u00f6ntem demek daha do\u011fru olur. \u0130lki bir butona ba\u011fl\u0131 olarak ikincisi ise Radio Buton List \u00f6\u011fesinin Change olay\u0131na ba\u011fl\u0131 olarak.<\/p>\n\n\n\n<p>&nbsp;\u00d6ncelikle ilk y\u00f6ntemimizle i\u015fe ba\u015flayal\u0131m; Bir tane web form a\u00e7\u0131p a\u015fa\u011f\u0131da yer alan basit radio buton list kodunu ve buton kodunu aynen yap\u0131\u015ft\u0131r\u0131n.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;table width=&quot;600px&quot; align=&quot;center&quot;&gt;\n            &lt;tr&gt;\n                &lt;td&gt;\n                    &lt;asp:RadioButtonList ID=&quot;rdTestList&quot; runat=&quot;server&quot;&gt;\n                        &lt;asp:ListItem&gt;Test1&lt;\/asp:ListItem&gt;\n                        &lt;asp:ListItem&gt;Test2&lt;\/asp:ListItem&gt;\n                        &lt;asp:ListItem&gt;Test3&lt;\/asp:ListItem&gt;\n                    &lt;\/asp:RadioButtonList&gt;\n                &lt;\/td&gt;\n                &lt;td&gt;\n                    &lt;asp:Button ID=&quot;btnSelect&quot; runat=&quot;server&quot; Text=&quot;Se\u00e7ili Olan\u0131 Getir&quot; OnClientClick=&quot;GetSelect();&quot;\/&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n        &lt;\/table&gt;\n<\/pre><\/div>\n\n\n<p>Sonras\u0131nda da &lt;head>&lt;\/head> tagleri aras\u0131na a\u015fa\u011f\u0131da yer alan kodu ekleyin;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;script type=&quot;text\/javascript&quot;&gt;\n        function GetSelect() {\n            try{\n                var sl = document.getElementById('&lt;%=rdTestList.ClientID%&gt;');\n                var slObject = sl.getElementsByTagName('input');\n                for (var i = 0; i &lt; slObject.length; i++) {\n                    if (slObject&#x5B;i].checked == true) {\n                        alert('Se\u00e7ilen De\u011fer -&gt;' + slObject&#x5B;i].value);\n                    }\n                }\n            } catch (e) {\n                alert('Hata -&gt;' + e.message);\n            }\n        }\n    &lt;\/script&gt;\n<\/pre><\/div>\n\n\n<p>\u015eimdide ikinci y\u00f6ntemimize gelelim. Yani Radio Buton List taraf\u0131nda bir se\u00e7me yada se\u00e7ilme i\u015flemi oldu\u011fu zaman se\u00e7ilen de\u011fere g\u00f6re kodun \u00e7al\u0131\u015fmas\u0131n\u0131n sa\u011flanmas\u0131. Bu k\u0131s\u0131mda yapmam\u0131z gereken tek de\u011fi\u015fiklik Radio Buton List objemiz de. \u015eimdi a\u015fa\u011f\u0131daki gibi ikinci bir Radio Buton List ekleyelim.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;table width=&quot;600px&quot; align=&quot;center&quot;&gt;\n            &lt;tr&gt;\n                &lt;td&gt;\n                    &lt;asp:RadioButtonList ID=&quot;rdTestList&quot; runat=&quot;server&quot;&gt;\n                        &lt;asp:ListItem&gt;Test1&lt;\/asp:ListItem&gt;\n                        &lt;asp:ListItem&gt;Test2&lt;\/asp:ListItem&gt;\n                        &lt;asp:ListItem&gt;Test3&lt;\/asp:ListItem&gt;\n                    &lt;\/asp:RadioButtonList&gt;\n                &lt;\/td&gt;\n                &lt;td&gt;\n                    &lt;asp:Button ID=&quot;btnSelect&quot; runat=&quot;server&quot; Text=&quot;Se\u00e7ili Olan\u0131 Getir&quot; OnClientClick=&quot;GetSelect();&quot;\/&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;\n                    Se\u00e7ime G\u00f6re Sonu\u00e7 G\u00f6sterir.\n                &lt;\/td&gt;\n                &lt;td&gt;\n                    &lt;asp:RadioButtonList ID=&quot;rbtList&quot; runat=&quot;server&quot; OnClick=&quot;GetSelect2();&quot;&gt;\n                        &lt;asp:ListItem Value=&quot;A&quot;&gt;Test1&lt;\/asp:ListItem&gt;\n                        &lt;asp:ListItem Value=&quot;B&quot;&gt;Test2&lt;\/asp:ListItem&gt;\n                        &lt;asp:ListItem Value=&quot;C&quot;&gt;Test3&lt;\/asp:ListItem&gt;\n                    &lt;\/asp:RadioButtonList&gt;\n                &lt;\/td&gt;\n            &lt;\/tr&gt;\n        &lt;\/table&gt;\n<\/pre><\/div>\n\n\n<p>Ard\u0131ndan mevcut JavaScript kodumuzu da ekledi\u011fimiz ikinci objeye g\u00f6re \u00e7o\u011falt\u0131yorum. Durum a\u015fa\u011f\u0131daki gibi oluyor \ud83d\ude42<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;script type=&quot;text\/javascript&quot;&gt;\n        function GetSelect() {\n            try{\n                var sl = document.getElementById('&lt;%=rdTestList.ClientID%&gt;');\n                var slObject = sl.getElementsByTagName('input');\n                for (var i = 0; i &lt; slObject.length; i++) {\n                    if (slObject&#x5B;i].checked == true) {\n                        alert('Se\u00e7ilen De\u011fer -&gt;' + slObject&#x5B;i].value);\n                    }\n                }\n            } catch (e) {\n                alert('Hata -&gt;' + e.message);\n            }\n        }\n \n        function GetSelect2() {\n            try {\n                var sl = document.getElementById('&lt;%=rbtList.ClientID%&gt;');\n                var slObject = sl.getElementsByTagName('input');\n                for (var i = 0; i &lt; slObject.length; i++) {\n                    if (slObject&#x5B;i].checked == true) {\n                        alert('Se\u00e7ilen De\u011fer -&gt;' + slObject&#x5B;i].value);\n                    }\n                }\n            } catch (e) {\n                alert('Hata -&gt;' + e.message);\n            }\n        }\n    &lt;\/script&gt;\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>Bazen yazd\u0131\u011f\u0131m uygulamalarda C# form taraf\u0131nda yer alan Radio Buton List gibi bir nesne i\u00e7erisinde yer alan se\u00e7eneklerden se\u00e7ilen de\u011feri al\u0131p i\u015flem yapt\u0131rmak gerekebiliyor. Bu sebepten de sizlere JavaScript taraf\u0131nda en k\u0131sa yoldan bu i\u015flemi nas\u0131l yapar\u0131z onu yazmaya \u00e7al\u0131\u015ft\u0131m. \ud83d\ude42 Benim burada anlataca\u011f\u0131m y\u00f6ntem iki t\u00fcrl\u00fc olacak hatta \u00f6rnek&#8230; <a class=\"continue-reading-link\" href=\"http:\/\/bahadirmeric.net\/bahadir\/2020\/06\/02\/javascript-ile-radio-buton-list-nesnesinden-deger-almak\/\"> Continue reading <span class=\"meta-nav\">&rarr; <\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":12,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[12,6],"class_list":["post-127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript","tag-visual-studio"],"_links":{"self":[{"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/posts\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":1,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/posts\/127\/revisions"}],"predecessor-version":[{"id":128,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/posts\/127\/revisions\/128"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/media\/12"}],"wp:attachment":[{"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/media?parent=127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/categories?post=127"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/tags?post=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}