透過 jQuery 取得 Asp.Net 裡 CheckBoxList 被勾選的文字(二)

先前曾經在「透過 jQuery 取得 Asp.Net 裡 CheckBoxList 被勾選的文字」文章記錄了當時的解決方法，最近再次遇到同樣的問題，試著換另一種做法來處理。

CheckBoxList 在網頁上的原始碼如下：

<table id="cb" border="0">
<tr>
 <td><input id="cb_0" type="checkbox" name="cb$0" />
 <label for="cb_0">paladin</label>
 </td>
</tr><tr>
 <td><input id="cb_1" type="checkbox" name="cb$1" />
 <label for="cb_1">ltt</label>
 </td>
</tr><tr>
 <td><input id="cb_2" type="checkbox" name="cb$2" />
 <label for="cb_2">lee</label>
 </td>
</tr>
</table>

在上面程式可以發現，CheckBox 的內容，是由後面緊接著的 Label 來定義。這次透過 jQuery 所提供的 .next() 函數，去找到所挑選物件的下一個兄弟姊妹，剛好 Label 正是 CheckBox 的第一順位兄弟姊妹。換言之，只要利用：

$("#cb_0").next().text()

就可以得到第一個 CheckBox 的值 ：「paladin」 了。而最初目的：透過 jQuery 取得 Asp.Net 裡 CheckBoxList 被勾選的文字，就可以改寫如下：

<script>
    function ShowData() {
        var str = "";
        $("input[type=checkbox]").filter(":checked").each(function () {
            str = str + $(this).next().text() + ',';
        });

        alert(str);
    }

    $(function () {

        $("input[type=checkbox]").click(function () {
            ShowData();
        });           
    });
</script>

比較起來，這個寫法似乎比過去的簡潔許多。

但如果 CheckBoxList 的 RepeatLayout 屬性設為 Flow，這方法是否依然可行呢？ RepeatLayout=Flow 的 HTML Code 如下：

<span id="cb_flow">
 <input id="cb_flow_0" type="checkbox" name="cb_flow$0" />
 <label for="cb_flow_0">paladin</label><br />
 <input id="cb_flow_1" type="checkbox" name="cb_flow$1" />
 <label for="cb_flow_1">ltt</label><br />
 <input id="cb_flow_2" type="checkbox" name="cb_flow$2" />
 <label for="cb_flow_2">lee</label>
</span>

CheckBox 後面的第一個兄弟姊妹，正是我們所要的值，所以這方法依然還是行的通。
參考：
01：透過 jQuery 取得 Asp.Net 裡 CheckBoxList 被勾選的文字
02：.next()