html 选择一行内容

img


想问一下这种最左边的白色框，点击之后选择一整行的效果
以及顶部的白色框，点击之后选择全部内容是怎么实现的

<!DOCTYPE html>
<html>
<head>
    <title>html+css+js简单实现复选框全选</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">

    </style>
    <script type="text/javascript">
        function quanxuan()
        {
        <!--循环对各单选框的操作-->
            for(var i=1;i<=3;i++)
            {
                var cbox_id="cadd"+i;
            <!--document获取cbbox_id-->
                var cbox=document.getElementById(cbox_id);
                //alert(cbox.value);
            <!--向单选框进行全选和非全选的if,ele判定-->
                if(document.getElementById("check1").checked)
                    cbox.checked=true;
                else
                    cbox.checked=false;
            }
        }
    </script>

</head>
<body>
<form id="form1">
    <table>
        <tr><td><input type="checkbox" id="check1" οnclick="quanxuan()" />全选</td>
            <td>你喜欢吃哪种水果？</td><td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cadd1" value="1" />1</td>
            <td>香蕉</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td><input type="checkbox" id="cadd2" value="2" />2</td>
            <td>苹果</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td><input type="checkbox" id="cadd3" value="3" />3</td>
            <td>梨子</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

    </table>
</form>
</body>
</html>