先前曾經在「透過 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()
沒有留言:
張貼留言