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

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>111td>
            tr>
            <tr>
                <td>222td>
            tr>
            <tr>
                <td>333td>
            tr>
            <tr>
                <td>444td>
            tr>
        table>
        
        <ul>
            <li>壹壹壹li>
            <li>壹壹壹li>
            <li>壹壹壹li>
            <li>壹壹壹li>
            <li>壹壹壹li>
            <li>壹壹壹li>
        ul>
        
        <table border="1" cellspacing="0">
            <tbody>
                <tr>
                    <td>TOP1td>
                    <td>周杰伦td>
                tr>
                <tr>
                    <td>TOP2td>
                    <td>林俊杰td>
                tr>
                <tr>
                    <td>TOP3td>
                    <td>潘玮柏td>
                tr>
                <tr>
                    <td>TOP4td>
                    <td>王力宏td>
                tr>
                <tr>
                    <td>TOP5td>
                    <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>

JQuery选择器 全选、反选、全部选、隔行变色、前n名_第1张图片

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>

你可能感兴趣的:(JQuery,HTML)