每日學習心得：Js獲取Checkboxlist所選值、instanceof 和typeof區別、為Array添加contains方法

2013-11-24

前言：

    上周在工作中遇到了一些跟JS以及前台交互的問題，雖然算不上多么高深，但是在解決時也走了一些彎路，所以就總結一下。

1.    JS獲取checkboxList所選的值

這個的應用場景是需要在前台獲取checkboxList的所選的值，然后作為dataService的參數傳遞為后台的方法。

在aspx頁的界面顯示代碼如下：

<div>
    <label>請選擇國家：</label>
        <asp:CheckBoxList ID="Cblist" runat="server">
        <asp:ListItem Value="CN" Text="中國" />
        <asp:ListItem Value="JP" Text="日本" />
        <asp:ListItem Value="US" Text="美國" />
        <asp:ListItem Value="UK" Text="英國" />
        </asp:CheckBoxList>
   <input type="button" value="確定" onclick="getCheckBoxListSelectedVales()" />
    </div>

 

但是在瀏覽器里邊渲染過之后就成了這樣子，從頁面的渲染代碼看，我們幾乎看不出有什么特殊的屬性來幫助我們獲取被選中的項的值

<div>
    <label>請選擇國家：</label>
        <table id="Cblist">
              <tr>
                               <td><input id="Cblist_0" type="checkbox" name="Cblist$0" value="CN" /><label for="Cblist_0">中國</label></td>
               </tr><tr>
                               <td><input id="Cblist_1" type="checkbox" name="Cblist$1" value="JP" /><label for="Cblist_1">日本</label></td>
               </tr><tr>
                               <td><input id="Cblist_2" type="checkbox" name="Cblist$2" value="US" /><label for="Cblist_2">美國</label></td>
               </tr><tr>
                               <td><input id="Cblist_3" type="checkbox" name="Cblist$3" value="UK" /><label for="Cblist_3">英國</label></td>
               </tr>
</table>
   <input type="button" value="確定" onclick="getCheckBoxListSelectedVales()" />
    </div>

 

這個時候我們該如何去獲取checkboxList的所選值呢？請看如下代碼：

functiongetCheckBoxListSelectedVales() {
            varcblists=$("[id*=Cblist]");
            varselected_value=newString('');
            for (vari=0; i<cblists.length; i++) {
                if (cblists[i].checked) {
                    if (selected_value!='')
                        selected_value+=',';
                    selected_value+=cblists[i].value;
                }
            }
            alert(selected_value);
}

 

在以上代碼中我們先通過$(“[id*=XXX]”)的方式進行過濾，這句代碼的意思是過濾出所有id中包含XXX的元素，這樣我們可以得到一個數組。然后F12在開放人員工具里，”腳本”，我們cblists添加監視，可以看到該數組中包含5個數組元素，點擊其中某一元素，然后發現他們有一個checked的屬性，同時還有value屬性，這樣我們就可以通過checked屬性來判斷該元素是否被選中，如果選中再獲取其值。

2.    JS將一個數組字符串轉換為數組對象

這里的應用場景是獲取了一個json對象，但是該json對象並不能滿足最終的需要，還需要對其進行修飾、改造。然后新建了一個string對象，將json對象重新進行拼接，最終得到了一個滿足需要的字符串，但是最終需要的還是一個對象，這個時候該如何辦呢？請看如下示例：

 

 //將一個json字符串轉換為對象
            var array_string = '[\'中國\',\'日本\',\'美國\',\'英國\']';
            array_string = eval('(' + array_string + ')');
            if (array_string instanceof Array)
                alert('array_string\'s type is Array');
            else
                alert('array_string\'s type is string');

 

這里主要用了eval方法，eval(string)方法，主要用來計算某個字符或者執行一段js代碼。如上所示需要將一個拼接好的數組形式的字符串轉換為一個數組對象，需要在字符串之外加上一個小括號:eval(‘(‘+XXXX+’))

同時這里為了判斷該字符串轉換后的類型，還用了instanceof，在判斷該類型時，很多人會首先想到typeof(),但是typeof()方法，得到的是object，其次typeof能得到的結果只有number,boolean,string,function,object,undefined這幾種，對於 Array,Null 等特殊對象使用 typeof 一律返回 object。而instanceof運算符，主要是用來判斷某一個變量是否是某個對象的實例，這里需要注意的是這里的 instanceof 測試的 object 是指 js 語法中的 object，不是指 dom 模型對象。

3       JS 為Array添加contains方法

這里的應用場景是需要判斷Array中是否包含某一元素，我們知道在string中有contains方法，但是數組里卻沒有這樣的方法，而有些時候可能會需要多次判斷數組中是否包含某一元素，所以需要為Array添加一個contains方法，這樣可以方便使用，具體代碼如下：

//為Array添加Contains方法
Array.prototype.contains = function(obj) {
            var i = this.length;
            while (i--) {
                if (this[i] === obj) {
                return true;
                }
            }
            return false;
        }
Var countryes=[‘中國’,’美國’,’日本’,’英國’]；
            if (array_string.contains('中國'))
                alert('It\'s China!');

    今天就總結到這里了，希望能給大家帶來一些幫助。