jQuery表格的一个问题

代码在下面。
问题是，点击行可以选中和选不中checkbox，但点checkbox本身，却会无法选中。原因是什么，如何解决？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //插入10行数据
            for (var i = 0; i < 10; i++)
                addRow();            $('#btnDelRow').click(function () {
                $('tr:has(:checked)').remove();
            });
        });        function addRow() {
            //新建一行，加入下面新建的3个TD
            $('<tr></tr>').append(
            //新建3个TD
            $('<td><input type="checkbox" /></td>')).append(
            $('<td>' + Math.ceil(Math.random() * 99) + '</td>')).append(
            $('<td>' + Math.ceil(Math.random() * 99) + '</td>'))
            //把TR加入到表格中
            .appendTo($('#actTable tbody'))
            //为TR加入选择事件
            .toggle(function () {
                $(this).find(':input').attr('checked', true);
                $(this).css('background-color', '#f9f');
            }, function () {
                $(this).find(':input').attr('checked', false);
                $(this).css('background-color', 'white');
            });
        }
    </script>
</head>
<body>
<input id="btnRnd" type="button" value="随机选择行" />
<input id="btnAddRow" type="button" value="添加一行" />
<input id="btnDelRow" type="button" value="删除选定行" />
<input id="btnUp" type="button" value="上移选定行" />
<input id="btnDown" type="button" value="下移选定行" />
<input id="btnSort" type="button" value="按第一列排序" />
<input id="btnSortBySum" type="button" value="按数据和排序" />
<table id="actTable" border="1" width="80%" align="center">
    <tbody></tbody>
</table>
    </body>
</html>

解决方案 »

  1.   

    .toggle(function () {
                    var cb = $(this).find(':input');
                    cb.attr('checked', !cb.attr("checked"));
                    $(this).css('background-color', '#f9f');
                }, function () {
                    var cb = $(this).find(':input');
                    cb.attr('checked', !cb.attr("checked"));
                    $(this).css('background-color', 'white');
                });
      

  2.   

    应该是点击checkbox的时候 也算行点击 然后本身行点击对checked变为true 之后又进行了一次checkbox本身的点击 导致true又变回false
    同理在你行点击选中后 再点击checkbox 行会变色但checkbox仍然是选中状态
    看看能不能吧这2个事件中的一个取缔一下~~~
      

  3.   

    很少用toggle,不是很喜欢，这个应该可以用了
        <style type="text/css" rel="stylesheet">
            .selectedColor
            {
                background-color: #f9f;
            }
        </style> function addRow() {
                //新建一行，加入下面新建的3个TD
                $('<tr></tr>').append(
                //新建3个TD
                $('<td><input type="checkbox"/></td>')).append(
                $('<td>' + Math.ceil(Math.random() * 99) + '</td>')).append(
                $('<td>' + Math.ceil(Math.random() * 99) + '</td>'))
                //把TR加入到表格中
                .appendTo($('#actTable tbody'))
                //为TR加入选择事件
                .click(function () {
                    $(this).toggleClass('selectedColor');
                    var cb = $(this).find(':input');
                    cb.attr('checked', !cb.attr("checked"));
                }).find(":input").click(function () {
                    $(this).attr('checked', !$(this).attr("checked"));
                });
            }