2012年7月6日 星期五

透過 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()

沒有留言:

張貼留言