CODEWITHSUNDEEP
javascriptjqueryhtmlajaxjstree
user2485051
user2485051

Reputation: 13

How to get the Ids of checkbox I've checked?

I tried the below code,

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

The question is:

When I click on the checkbox it returns only the ids Iv'e already checked. How do I get the ids of currently checked checkboxes?

My whole purpose of the code is to search the database against all combination of checkbox tree and text through Ajax.

Upvotes: 1

Views: 1665

Answers (3)

simonzack
simonzack

Reputation: 20928

Instead of using js events, it's best to use the native events supported by 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>

Using the click event directly does not work, as the jstree event which changes the states of the checkboxes fires after the click event fires

Upvotes: 3

CodeHunter
CodeHunter

Reputation: 368

u can try this

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

Upvotes: 0

Nish
Nish

Reputation: 1137

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

You can call this function onchange of checkboxes.

Upvotes: 1

Related Questions