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>

質問は：

をクリックすると、すでにチェックされている Iv'echeckboxのみが返されます。現在チェックされているのidsを取得するにはどうすればよいですか?idscheckboxes

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>

クリック イベントの発生後にチェックボックスの状態を変更する jstree イベントが発生するため、クリック イベントを直接使用しても機能しません。

于 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 に答える