CODEWITHSUNDEEP
jqueryasp.nethtmljquery-ui
ethem
ethem

Reputation: 2908

Jquery - add some text to textbox and sort the textbox from Jquery

I'm using ASP.NET asp:checkboxlist control with 36 listitems. which displays 36 checkboxes. in HTML it displays like below table. I also have a I would like to add the checked items in this div in sorted way. But when they uncheck the checkbox it should remove from the div. I display it , (comma separeted).

like:

selected : 5,6,9,12,25

I try to use Jquery. Below I try to add a click on the Checkboxes and I try to concat the values, but I'm struggling with the code. Can someone give some guide? at least what methods and how to sort in the div? It only contains numbers from 1-36.

    $(function () {
        var $tblChkBox = $("table.chk input:checkbox");
        $tblChkBox.click(function (e) {
            $('#chkBoxListNumbers').val($('#chkBoxListNumbers') +',');
        });
    });


<table id="chkBoxListNumbers" class="chk">
     <tr>       <td><input id="chkBoxListNumbers_0" type="checkbox" value="1"/></td>
       <td><input id="chkBoxListNumbers_1" type="checkbox" value="3"/></td>
       <td><input id="chkBoxListNumbers_2" type="checkbox" value="4"/></td>
       <td><input id="chkBoxListNumbers_3" type="checkbox" value="5"/></td>
     </tr> 
</table>

Upvotes: 0

Views: 788

Answers (2)

alonisser
alonisser

Reputation: 12068

nice @rotem-tamir could make this a little more condensed with:

ids.push(this.id.split("_"[4].join(",";
alert (joinded);

Upvotes: 0

Rotem Tamir
Rotem Tamir

Reputation: 1457

Explanations in comments:

$(function () {
    var $tblChkBox = $("table.chk input:checkbox");
    $tblChkBox.click(function (e) {
        checked = $("#chkBoxListNumbers input:checked"); // get all checked checkboxes in an array
        var ids = []; // prepare an array to store only the ID numbers
        checked.each( function () {
            ids.push(this.id.split("_")[1]); // iterate over the checked elements and push only the ID in
        });
        var joined = ids.join(","); // join them (equivilant to php's implode() )
        alert(joined); // alert the new string.. you can use this to put it in a div like $("#div_id").html(joined);
    });
});

Upvotes: 2

Related Questions