JQuery选择器全选、反选、全部选、隔行变色、前n名

最新推荐文章于 2022-04-23 20:48:40 发布

域·羽灵言

最新推荐文章于 2022-04-23 20:48:40 发布

阅读量194

点赞数

分类专栏： JQuery HTML 文章标签： jquery

本文链接：https://blog.csdn.net/YuYuLingYan/article/details/107816037

版权

JQuery 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

HTML部分

<style>
        .tbody_colo {
            background-color: #59e9f6;
        }
</style>
<body>
    <div>
        <!--全选-->
        <div>
            <input class="checkbox" type="checkbox" name="curriculum" value=".Net" />.Net
            <input class="checkbox" type="checkbox" name="curriculum" value="Java" />Java
            <input class="checkbox" type="checkbox" name="curriculum" value="PHP" />PHP
            <br />
            <label id="lable"></label>
            <label id="lable2" hidden="hidden">被选中</label>
            <label id="lable3"></label>
            <br />
            <button id="btn_all">全选</button>
            <button id="btn_noall">全不选</button>
            <button id="btn_back">反选</button>
            <button id="btn_colo">隔行变色</button>
            <button id="btn_three">前三名</button>
        </div>
        <!--隔行变色-->
        <table id="table" border="1" cellspacing="0" width="100px">
            <tr>
                <td>111</td>
            </tr>
            <tr>
                <td>222</td>
            </tr>
            <tr>
                <td>333</td>
            </tr>
            <tr>
                <td>444</td>
            </tr>
        </table>
        <!--前三名-->
        <ul>
            <li>壹壹壹</li>
            <li>壹壹壹</li>
            <li>壹壹壹</li>
            <li>壹壹壹</li>
            <li>壹壹壹</li>
            <li>壹壹壹</li>
        </ul>
        <!--点击行变色-->
        <table border="1" cellspacing="0">
            <tbody>
                <tr>
                    <td>TOP1</td>
                    <td>周杰伦</td>
                </tr>
                <tr>
                    <td>TOP2</td>
                    <td>林俊杰</td>
                </tr>
                <tr>
                    <td>TOP3</td>
                    <td>潘玮柏</td>
                </tr>
                <tr>
                    <td>TOP4</td>
                    <td>王力宏</td>
                </tr>
                <tr>
                    <td>TOP5</td>
                    <td>许嵩</td>
                </tr>
            </tbody>
        </table>
        <br />
        <hr />
        <br />
        <!--计算器-->
        <div>
            <input type="text" id="txt1" value="" />
            +
            <input type="text" id="txt2" value="" />
            <input id="btn_sum" type="button" name="name" value="=" />
            <input type="text" id="txt3" value="" />
        </div>
        <br />
        <!--开关灯-->
        <div>
            <input id="btn_day" type="button" name="name" value="关灯" />
        </div>
    </div>

</body>

HTML效果图

JQuery部分

<script src="Scripts/jquery-1.11.3.js"></script>
<script type="text/javascript">
        $(function () {

            $(".checkbox").on("click", function () {
                //var txt = "";
                //$("input:checkbox").each(function () {
                //    if ($(this).prop("checked")) {
                //        txt += $(this).val() + " ";
                //    }
                //})
                //var checkbox_length = $("input:checkbox:checked").length;
                //if (checkbox_length > 0) {
                //    $("#lable").text(checkbox_length);
                //    $("#lable,#lable2,#lable3").show();
                //    $("#lable3").text(txt);
                //}
                //else {
                //    $("#lable,#lable2,#lable3").hide();
                //}
                //定义 赋值
                var num = $(":checkbox:checked").length;
                var arr = new Array();
                //遍历
                $(":checkbox:checked").each(function () {
                    arr.push($(this).val());
                });
                //输出
                $("#lable3").text(num + "个被选中" + ",分别是：" + arr.toString());

                

            });
            //全选
            $("#btn_all").on("click", function () {
                $("input:checkbox").prop("checked", true);
            });
            //全不选
            $("#btn_noall").on("click", function () {
                $("input:checkbox").prop("checked", false);
            });
            //反选
            $("#btn_back").on("click", function () {
                $("[name=curriculum]:checkbox").each(function () {
                    this.checked = !this.checked;
                })
            })
            //隔行变色
            $("#btn_colo").on("click", function () {
                $("#table td:even").css("background", "red");
            });
            //前三名
            $("#btn_three").on("click", function () {
                var z = $("ul").find('li:lt(3)').css("font-size", "30px");

            });
            //点击行变色
            $("tbody tr").on("click", function () {
                $(this).addClass("tbody_colo").siblings().removeClass("tbody_colo");
            });
            //加法
            $("#btn_sum").on("click", function () {
                var no1 = $("#txt1").val();
                var no2 = $("#txt2").val();
                var sum = no1 * 1 + no2 * 1;
                $("#txt3").val(sum);
            });
            //开关灯
            $("#btn_day").on("click", function () {
                //判断
                if ($("#btn_day").val() == "关灯") {
                    $("body").css("background-color", "black");
                    $("#btn_day").val("开灯");
                }
                else {
                    $("body").css("background-color", "white");
                    $("#btn_day").val("关灯");
                }
            })
        })
    </script>