1

我尝试了下面的代码，

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
</head>

<body>
<div id="jstree_id" class="demo">
<ul>

    <li id="asia">
    <a href="#" onClick="bridge('url','my_id')">asia</a>
    <ul>
        <li id="china">
        <a href="#" onClick="bridge('url','my_id')">india</a>
        </li>
        <li id="japan">
        <a href="#" onClick="bridge('url','my_id')">japan</a>
        </li>
    </ul>
    </li>

    <li id="usa">
        <a href="#" onClick="bridge('url','my_id')">usa</a>
    </li>

</ul>
</div>

<input type="text"      id="com"        onKeyUp="bridge('com_url','my_id')" />
<input type="text"      id="person"     onKeyUp="bridge('prsn_url','my_id')" />
<input type="button"    value="click"   onClick="bridge('url','my_id');" />

<script type="text/javascript" class="source">
$(function () {
    $("#jstree_id").jstree({        
        "plugins" : [ "themes", "html_data", "checkbox", "sort", "ui" ]
    });
});

function bridge(path, tag) {

    // path & tag are required one for Ajax functions*
    var checked_ids = []; 
    $("#jstree_id").jstree("get_checked",null,true).each(function () { 
        checked_ids.push(this.id); 
    }); 

    var company = $("#com").val() || [];
    var person  = $("#person").val() || []; 

    console.log(company+person+checked_ids);
}
</script>
</body>
</html>

问题是：

当我点击它时，checkbox它只返回ids已经检查过的 Iv'e。我如何获得ids当前检查的checkboxes？

checkbox tree我编写代码的全部目的是针对所有组合搜索text数据库Ajax。

4

3 回答 3

3

最好不要使用js事件，最好使用jstree支持的原生事件： 

<body>

<div id="jstree_id" class="demo">
    <ul>
        <li id="asia">
        <a href="#">asia</a>
        <ul>
            <li id="china">
                <a href="#">india</a>
            </li>
            <li id="japan">
                <a href="#">japan</a>
            </li>
        </ul>
        </li>
        <li id="usa">
            <a href="#">usa</a>
        </li>

    </ul>
</div>

<input type="text"      id="com"        onKeyUp="bridge('com_url','my_id')" />
<input type="text"      id="person"     onKeyUp="bridge('prsn_url','my_id')" />
<input type="button"    value="click"   onClick="bridge('url','my_id');" />

<script type="text/javascript" class="source">
$(function () {
    $("#jstree_id").jstree({        
        "plugins" : [ "themes", "html_data", "checkbox", "sort", "ui" ]
    });
});

$('#jstree_id').bind('change_state.jstree',function(){
    bridge('url','my_id');
});

function bridge(path, tag) {
    //path & tag are required one for Ajax functions
    var checked_ids = []; 
    $("#jstree_id").jstree("get_checked",null,true).each(function () { 
        checked_ids.push(this.id); 
    });

    var company = $("#com").val() || [];
    var person  = $("#person").val() || []; 

    console.log(company+person+checked_ids);
}
</script>
</body>
</html>

直接使用 click 事件不起作用，因为改变复选框状态的 jstree 事件在 click 事件触发后触发

于 2013-06-14T08:48:13.640 回答
1 
function getCheckedIDs()
{
    var elements = document.getElementsByTagName("INPUT");
    var checkedArray =  new Array();
    for(var i=0;i<elements.length;i++)
    {
        if(elements[i].type === 'checkbox' && elements[i].checked)
        {
            checkedArray.push(elements[i].id);
        }
    }
    return checkedArray;
}

您可以在复选框更改时调用此函数。

于 2013-06-14T08:12:38.307 回答
0

你可以试试这个

$(document).ready(function() {
var entity=[];
    $("input[type='checkbox']").click(function(){
        entity = $('input:checkbox:checked[name=checked]').map(function () {
              return $(this).attr("id");
        }).get();
        alert(entity);
    });
});
于 2013-06-14T08:21:58.480 回答