如何获取我检查过的复选框的 ID？答案

【问题标题】：How to get the Ids of checkbox I've checked?如何获取我检查过的复选框的 ID？
【发布时间】：2013-06-14 08:06:00
【问题描述】：

我试过下面的代码，

<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 我已经检查过了。如何获取当前选中的checkboxes 的ids？

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

【问题讨论】：

标签： javascript jquery html ajax jstree

【解决方案1】：

不要使用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事件触发后触发

【讨论】：

如何在$('#jstree_id').bind('change_state.jstree',function(){ bridge('url','my_id'); }); 中传递准确的url 和my_id？

【解决方案2】：

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;
}

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

【讨论】：

checkboxes 不是jstree 中真正的cheboxes。我在控制台中只得到[]。

【解决方案3】：

你可以试试这个

$(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);
    });
});

【讨论】：