jQuery操作JSF中的Checkbox树
谭宜
2023-12-01
jQuery操作JSF中的Checkbox树
下面的代码是,当选中父节点,则子节点全选;选中任意一个子节点,则选中父节点
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>
<script type="text/javascript">
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;
}
});
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.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>
<script type="text/javascript">
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 = true;
jQuery(parentDiv).contents().find(":checkbox").each(function() {
if(!this.checked) {
hasSelected = false;
}
});
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 ;
}
}
声明:此文章从 [u]http://www.blogjava.net/TiGERTiAN/archive/2009/12/27/307463.html[/u]
转载过来的