jQuery 点击tr选中checkbox，并点击checkbox本身也正常，表格练习完工

来源：互联网发布：八国集团中国知乎编辑：程序博客网时间：2024/06/02 17:02

花了大半天才搞懂，原来把checkbox放在tr的td里，点击checkbox时，既触发了checkbox，又触发了tr，折腾了半天总算搞定了，其实就加上一句判断，当前的不是checkbox即可，event.target != $(this).find(":checkbox")[0]，还没全部完成，先附上练习全部代码，融合了表格的各种技术，觉得这个做完后进步了一大截。

<pre name="code" class="html"><!DOCTYPE html><html><head>    <title></title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <script src="../JS/jquery-1.10.2.js"></script>    <link href="css.css" rel="stylesheet" />    <script src="js.js"></script></head><body>    <div id="header">        单双行颜色区分，单选多选行高亮，表单展开关闭，搜索框，字体放大缩小，开灯关灯换肤，表格标签切换<br />        <input type="button" value="放大字体" id="incFont" />        <input type="button" value="缩小字体" id="decFont" />        <input type="button" value="开灯" id="lightOn" />        <input type="button" value="关灯" id="lightOff" />        <label id="errorMsg">　　　　　　　　</label>        <hr />    </div>    <div id="main">        <div class="tabMenu">            <ul>                <li>单选表</li>                <li>多选表</li>                <li>注册表</li>            </ul>        </div>        <div class="tabBox">            <div>                <table>                    <thead>                        <tr>                            <td>选项</td>                            <td>姓名</td>                            <td>性别</td>                            <td>电话</td>                        </tr>                    </thead>                    <tbody>                        <tr>                            <td>                                <input type="radio" name="singleRadio" />                            </td>                            <td>张三</td>                            <td>男</td>                            <td>111111</td>                        </tr>                        <tr>                            <td>                                <input type="radio" name="singleRadio" checked="checked" />                            </td>                            <td>李四</td>                            <td>男</td>                            <td>222222</td>                        </tr>                        <tr>                            <td>                                <input type="radio" name="singleRadio" />                            </td>                            <td>王五</td>                            <td>男</td>                            <td>333333</td>                        </tr>                        <tr>                            <td>                                <input type="radio" name="singleRadio" />                            </td>                            <td>赵六</td>                            <td>女</td>                            <td>444444</td>                        </tr>                    </tbody>                </table>                <label>请输入要筛选的名字：<input type="text" class="txtInput"/></label><br />                <input type="button" value="筛选" class="btnSearch" />                <input type="button" value="复位" class="btnReset" />            </div>            <div>                <table>                    <thead>                        <tr>                            <td>选项</td>                            <td>姓名</td>                            <td>性别</td>                            <td>电话</td>                        </tr>                    </thead>                    <tbody>                        <tr>                            <td>                                <input type="checkbox" name="muliCheckbox" />                            </td>                            <td>张三</td>                            <td>男</td>                            <td>111111</td>                        </tr>                        <tr>                            <td>                                <input type="checkbox" name="muliCheckbox" />                            </td>                            <td>李四</td>                            <td>男</td>                            <td>222222</td>                        </tr>                        <tr>                            <td>                                <input type="checkbox" name="muliCheckbox" />                            </td>                            <td>王五</td>                            <td>男</td>                            <td>333333</td>                        </tr>                        <tr>                            <td>                                <input type="checkbox" name="muliCheckbox" />                            </td>                            <td>赵六</td>                            <td>女</td>                            <td>444444</td>                        </tr>                    </tbody>                </table>                <label>请输入要筛选的名字：<input type="text" class="txtInput" /></label><br />                <input type="button" value="筛选" class="btnSearch" />                <input type="button" value="复位" class="btnReset" />            </div>            <div>                注册表内容            </div>        </div>    </div></body></html>

body {    font-size:16px;    width:960px;}.even{    background-color:#BBBBBB;}.odd{    background-color:#DDDDDD;}.highlight{    background-color:red;}.tabMenu,.tabBox,#header{    margin:0 auto;    text-align:center;}.tabMenu{    width:400px;    background-color:orange;    border:1px solid black;}.tabBox{    width:400px;    height:400px;}.tabBox td{    padding:0 20px;    cursor:pointer;}.tabBox thead{    background-color:lightblue;}.tabMenu ul{    padding:0;    width:400px;    text-align:center;    margin:0 auto;    list-style-type:none;}.tabMenu ul li{    cursor:pointer;    display:inline-block;    *display:inline;    margin:0 20px;    border:2px solid;    border-bottom-color: #333333;    border-right-color: #555555;    border-left-color: #BBBBBB;    border-top-color: #DDDDDD; }.tabBox{    border:1px solid black;}

/// <reference path="../JS/jquery-1.10.2.js" />$(function () {    $(".tabBox div").hide();    $(".tabBox div tbody tr:odd").addClass("odd");    $(".tabBox div tbody tr:even").addClass("even");    $(".tabMenu li").click(function () {    //标签栏切换绑定        $(this).addClass("highlight").siblings().removeClass("highlight");        $(".tabBox >div").eq($(".tabMenu li").index(this))  //用index来绑定标签和div            .show().siblings().hide();    })    $(".tabBox tbody tr").click(function (event) {        $(this).addClass("highlight").siblings().removeClass("highlight");        if ($(this).find(":radio:visible").length > 0) {//为了区别是哪个标签进来的            $(this).find(":radio").prop("checked", true)                .parent().parent().siblings().find(":radio").prop("checked", false);    //把其它radio设为未选中        }        else if ($(this).find(":checkbox:visible").length > 0 && event.target != $(this).find(":checkbox")[0]) {//加上判断非点击checkbox本身            var chkBoxStatus = $(this).find(":checkbox").is(":checked");            $(this).find(":checkbox").prop("checked", !chkBoxStatus);        }    })    $("#header *").click(function () {        var incdecFontSize = parseInt($(".tabBox").css("font-size"), 10);        if ($(this).attr("id") == "incFont") {            if (parseInt($(".tabBox").css("font-size"), 10) < 26) {                incdecFontSize += 3;                $(".tabBox").css("font-size", incdecFontSize + "px");                $("#errorMsg").html("当前的字体为：" + incdecFontSize);            }        }        else if ($(this).attr("id") == "decFont") {            if (parseInt($(".tabBox").css("font-size"), 10) > 5) {                incdecFontSize -= 3;                $(".tabBox").css("font-size", incdecFontSize + "px");                $("#errorMsg").html("当前的字体为：" + incdecFontSize);            }        }        else if ($(this).attr("id") == "lightOn") {            $(".tabBox").css("background-color", "");            $("#errorMsg").html("当前的状态为开灯");        }        else if (($(this).attr("id") == "lightOff")) {            $(".tabBox").css("background-color", "gray");            $("#errorMsg").html("当前的状态为关灯");        }    })    $(".tabBox .btnSearch").click(function () {        var txtInput = $(this).prev().prev().find(".txtInput").val();        if (txtInput != "" && txtInput != null) {            $(".tabBox tbody td:visible:contains('" + txtInput + "')")                .parent().addClass("highlight").find(":input").prop("checked",true)                .parent().parent().siblings().removeClass("highlight").hide();        }    })    $(".tabBox .btnReset").click(function () {        $(this).siblings().find("tr").removeClass("highlight").show().find(":input").prop("checked", false);    })})

0 0