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

Question

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>

Rotem Tamir · Accepted Answer · 2011-03-21 11:25:20Z

2

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

answered Mar 21, 2011 at 11:25

Rotem Tamir

1,4572 gold badges12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ethem Over a year ago

Hi Rotem, this is exact what I want thank you... but my name of id is "MainContent_TabContainer1_TabPanel1History_chkBoxListNumbers_" ... So the "_" takes "Tabcontainer1" "Tabcontainer1, Tabcontainer1", "tabconatiner1, tabcontainer1,tabcontainer1" etc... Your solution is good, so accept your solution... could you just help me with these too? thanks again...

ethem Over a year ago

ok I got it I changed from [1] to [4] and it works great... super.. you're great.... thanks so much...

alonisser · Accepted Answer · 2011-11-02 13:36:05Z

0

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

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

answered Nov 2, 2011 at 13:36

alonisser

12.2k21 gold badges89 silver badges144 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related