2012-10-05

[ASP.net]關於ASP.net 如何用Javascript抓到CheckBox的Value


因為Silverlight and Flex 寫習慣,很多地方以為會很溫馨..
下.Value的語法就可以取到值..

但是在HTML的世界裡面..我才發現很溫馨的CheckBoxList
網路上看到許多方法,最後我試了一個方法有點偷吃步,但是我覺得目前很夠我用..


先看看一般的狀況
C# Code:
==============================================================================

var a = new ListItem("A", "");
var b = new ListItem("B", "");
var c = new ListItem("C", "");
var d = new ListItem("D", "");
this.CheckBoxList2.Items.Add(a);
this.CheckBoxList2.Items.Add(c);
this.CheckBoxList2.Items.Add(b);
this.CheckBoxList2.Items.Add(d);

很簡單的範例那我們看看Firebug下面的dom結構..



果然ASP.net 他是用Table + Input + Label 去模擬出來的…即使我有代入ListItem的值為'我','是','測','試'…
在html中其實都不會看到這些字樣..

很好..接下來我要小改寫一些地方…


            var a = new ListItem("A", "");
            a.Attributes.Add("id", "");
            
            var b = new ListItem("B", "");
            b.Attributes.Add("id", "");

            var c = new ListItem("C", "");
            c.Attributes.Add("id", "");

            var d = new ListItem("D", "");
            d.Attributes.Add("id", "");


            this.CheckBoxList2.Items.Add(a);
            this.CheckBoxList2.Items.Add(b);
            this.CheckBoxList2.Items.Add(c);
            this.CheckBoxList2.Items.Add(d);

OK..其中我偷偷在ListItem裡面插入了id這attribute 並且帶入我想放的值…

現在我們來看看Firebug下面的德性..


很好..他多了一個span去塞入的id..天啊..哪邊來的span 不過至少有在client端出現了..至少解決部分問題了.
現在我們來看看Code 怎麼去讀取user 勾起來的東西..


           function GetResult() {
                var checkBox = document.getElementById('<%=this.CheckBoxList1.ClientID %>');
                var inputs = checkBox.getElementsByTagName('input');
                var spam = checkBox.getElementsByTagName('span');
                var ids = ""; 
                for (var i = 0; i < inputs.length; i++) {
                    var inputItem = inputs[i];

                    if (inputItem.type.substr(0, 8) == 'checkbox') {
                        if (inputItem.checked == true)
                            ids += spam[i].id+",";
                    }
                }

                ids = ids.substr(0, ids.length - 1);
                alert(ids);
            }


為什麼我要用id 這 attribute 因為我測過一些瀏覽器id是最沒有問題的.. 所以改用這偷吃步的方法..

如果有需要請自行改造…
Download Sample Code: