Enjoy yourself,and don't care about others' thinking!
----TiGERTiAN

隨筆-348 評論-598 文章-0 trackbacks-0

用jQuery給頁面中樹形的Checkbox默認加上父子節點相關操作(JSF的Richfaces專用)

jQuery.noConflict();//與JSF搭配需要這句話，不然會有沖突

jQuery(document).ready(function() {

// Add click event listener to each checkbox in the tree page

// Note! Using this simple selector assumes that there are no other

// checkboxes on the page, if there are other checkboxes then

// selector should be changed

jQuery(":checkbox").click(function(){

updateChildren(this);

updateParent(this);

});

</script>

function updateChildren(currentCheckBox)

{

// Get state of current checkbox (true or false)

var state = currentCheckBox.checked;

// Get parent TABLE, where current checkbox is places

var parentTables = jQuery(currentCheckBox).parents("table");

var parentTable = parentTables[0];

// Get DIV where child nodes with checkboxes are situated

// See http://docs.jquery.com/Traversing/ to get better uderstanding of

// parents() and next()

var childDivs = jQuery(parentTable).next("div");

if( childDivs.length > 0 )

{

var childDiv = childDivs[0];

// Iterate over all child nodes checkboxes and set same state as the

// current checkbox state

jQuery(childDiv).contents().find(":checkbox").each(function() {

this.checked = state;

});

}

//更新父節點的方法，如果子節點全部選中則父節點選中，如果子節點中有一個未選中，則父節點也未選中

function updateParent(currentCheckbox) {

var parentDivs = jQuery(currentCheckbox).parents("div");

var parentDiv = parentDivs[0];

var hasSelected = false;

jQuery(parentDiv).contents().find(":checkbox").each(function() {

if(this.checked) {

hasSelected = true;

                }else{
                        hasSelected = false;
                        return;
                    }

});

var parentTables = jQuery(parentDiv).prev("table");

if(parentTables.length > 0)

{

var parentTable = parentTables[0];

var parentCheckboxes = jQuery(parentTable).find(":checkbox");

var parentCheckbox = parentCheckboxes[0];

parentCheckbox.checked = hasSelected ;

}

注意引入jQuery包。
此js代碼加到頁面中，將會給頁面中的樹形菜單的Checkbox默認加上一些功能：當選擇父節點時全選子節點；當子節點全選時，父節點也會被自動選擇上。同時不會影響其他Checkbox。

---------------------------------------------------------
專注移動開發
Android, Windows Mobile, iPhone, J2ME, BlackBerry, Symbian

posted on 2009-11-12 08:46 TiGERTiAN 閱讀(3432) 評論(4) 編輯收藏所屬分類: VB/ASP 、JSF

評論:

# re: 用jQuery給頁面中樹形的Checkbox默認加上父子節點相關操作 2009-11-12 14:30 | 凡客誠品優惠券

不錯，收藏回復更多評論

# re: 用jQuery給頁面中樹形的Checkbox默認加上父子節點相關操作 2009-11-12 18:49 | BeanSoft

收藏了! 回復更多評論

# re: 用jQuery給頁面中樹形的Checkbox默認加上父子節點相關操作 2009-11-12 19:25 | jackyrong

能否提供完整代碼下載呢回復更多評論

# re: 用jQuery給頁面中樹形的Checkbox默認加上父子節點相關操作 2009-11-12 19:45 | TiGERTiAN

@jackyrong
這個就是完整的代碼啊回復更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 用jQuery給頁面中樹形的Checkbox默認加上父子節點相關操作(JSF的Richfaces專用) Oracle數據遷移到SQL Server小結 asp導出excel用到的類 VML 3D報表修正版最近在幫學校做網站 ASP中遇到的問題 ASP防注的最佳的方法(我認為的)

專注移動開發--Windows Mobile, Android, iPhone, J2ME, BlackBerry, Symbian, Windows Phone

慢慢混，慢慢學

<

2009年11月

>

日

一

二

三

四

五

六

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

常用鏈接

留言簿(43)

隨筆分類(402)

隨筆檔案(306)

相冊

我正在讀的書

我的好友們

搜索

積分與排名

積分 - 812997
排名 - 50

常用鏈接

留言簿(43)

隨筆分類(402)

隨筆檔案(306)

相冊

我的好友們

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜