开发者

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>


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


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

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜