Getting checkbox value from nested gridview_问答_开发者

I have a nested gridview with 45 checkboxes. I want the user to be able to click a checkbox and have that value held in a separate gridview until they wish to act on it (similar to a shopping cart).

The checkboxes are nested in a 2nd level gridview behind a repeater.

     <repeater>
       <gridview>
          <gridview>
              checkbox
          <gridview/>
       <girdview />
     <repeater />

I was having a heck of a time trying to get the value of the checkbox that deep and want to learn jQuery and thought this is a good time.

What I was thinking was the user would click the checkbox, jQuery would get the id of the control (and value), I could then pass that to a ajax postback trigger and fill the 'shopping cart' gridview. The reason why I need to go through ajax is I need to get more va开发者_StackOverflow社区lues from a database based on the user selected checkbox.

I think I could take it from there. My biggest problem right now is figuring out how to get the id and value from the checkbox.

You should be able to get the value (or some data) from the checkbox thats clicked with something like

$('#gridview-wrapper checkbox').live("click", function(e){ //do something with the value form the click.

});

you might want to use the information to populate something elsewhere on the page or you might want to store the value in a data array.

The data array is basically a way for you to store key value pair data in jquery ready for use when the user takes another action on the page.

read more here -> http://api.jquery.com/data/

Never used a Repeater, but with some simple jQuery and html I think you can get the same effect without the bloatedness of the gridview controls:

Save as an html file for an example

<html>
<head>
    <title>Test</title>
</head>
<body>
    <table id="tblItems">
        <tbody>
            <tr>
                <td>+</td><td>Category 1</td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 1</td><td>Price</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 2</td><td>Price</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 3</td><td>Price</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>+</td><td>Category 2</td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 4</td><td>Price</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 5</td><td>Price</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 6</td><td>Price</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    <table id="tblResults">
        <thead>
            <tr style="font-weight:bold">
                <td >Item Name</td><td>Price</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" ></script>
<script>
    $(document).ready(function() {
        $('#tblItems > tbody > tr').each(function(i){
            $row = $(this);
            if(i % 2 == 0){//even rows are expanders
                $row.children('td:eq(0)').click(function(){
                    var $tmp = $(this);
                    var next = i + 1;
                    $row.parent().children("tr:eq(" + next + ")").toggle(); //toggle the next row
                    if($tmp.html() == '+'){ 
                        $tmp.html('-');
                    }else{ 
                        $tmp.html('+');
                    }
                });
            }else{//odd rows are collapsed by default
                $row.toggle();
            }
        });

        $('input[type="checkbox"]').change(function(){
            var $chkBox = $(this),
                data = $chkBox.data('checkboxData');

            if(!data){ //Add some data to remember to this checkbox
                $chkBox.data('checkboxData', {
                    id: Example.GetUniqueId() // create a unique ID for this checkbox
                });
                data = $chkBox.data('checkboxData');
            }
            if($chkBox.is(':checked')){ //checkbox is checked
                $("#tblResults tbody").append($chkBox.closest('tr').clone().attr('id', data.id)); //copy the checked row and add ID
                $("#tblResults input").parent().remove(); //remove the checkbox from the copied row
            }else{
                $("#" + data.id).remove(); //remove copied row when not checked 
            }
        });
    });

    Example = {};

    Example.GetUniqueId = function ()
    {
         var dateObject = new Date();
         var uniqueId =
              dateObject.getFullYear() + '' +
              dateObject.getMonth() + '' +
              dateObject.getDate() + '' +
              dateObject.getTime();

         return uniqueId;
    };
</script>