复选框位于每行的第一个单元格中,如果选中复选框,则显示行值?

时间:2011-08-26 11:29:06

标签: jquery

我尝试做某事......,只有检查了所有复选框后,Bellow代码才会发出警报。 怎么做,请帮帮我。

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
     $("#c1,#c2,#c3").click(function()
     {

        if($("#tbl").find('tr:first').find('input:checkbox').is(':checked')==true)
        {
             alert("checked");
          //get the column values of that row.
          //$("#result").html();
        }
     });
});
</script>
<!-- Table--- -->
<table border="1" id="tbl">
          <tr>
               <td><input type="checkbox" id="c1"></td>
               <td>value 01</td>
               <td>value 02</td>
               <td>value 03</td>
          </tr>
          <tr>
              <td><input type="checkbox" id="c2" ></td>
               <td>value 11</td>
               <td>value 12</td>
               <td>value 13</td>
          </tr>
          <tr>
               <td><input type="checkbox" id="c3"></td>
               <td>value 21</td>
               <td>value 22</td>
               <td>value 23</td>
          </tr>
</table>

<!-- show result -->
<div id="result"></div>

1 个答案:

答案 0 :(得分:1)

var $result = $('#result');
$('#tbl tr td :checkbox').change(function(){
    var $this = $(this),
        $tr = $this.closest('tr'),
        text = $tr.find('td:not(:first)').text();
    if($this.is(':checked')){
        $result.html($result.html()+text);
    } else{
        $result.html($result.html().replace(text, ''));
    }
});

Demo