美文网首页
jq全选反选

jq全选反选

作者: 张文超ai | 来源:发表于2018-11-16 18:19 被阅读0次
  $(document).ready(function () {
       //实现全选反选
       $("input[id='selectall']").on('click', function() {
          $("input[name='chk']").prop("checked", $(this).prop('checked'));
       })
        $("#div1 input[name='chk']").on('click', function() {
           //当选中的长度等于checkbox的长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中
           if($("#div1 input[name='chk']").length === $("#div1 input:checked").length) {
               $("input[id='selectall']").prop("checked", true);
           } else {
               $("input[id='selectall']").prop("checked", false);
           }
       })

<input type="checkbox" id="selectall">one <br>
<div id="div1">
    <input type="checkbox" name="chk">two <br>
    <input type="checkbox" name="chk">three <br>
    <input type="checkbox" name="chk">four <br>
    <input type="checkbox" name="chk">five <br>
    <input type="checkbox" name="chk">six <br>
</div>

奇偶变色

     $(document).ready(function () {
        $("tr:even").css("background-color","red");
        $("tr:odd").css("background-color","blue");
        $("tr:last").css("font-weight","bold");
        $("tr:eq(1)").css("background-color","green");
        $("tr:eq(2)").css("background-color","orange");
        $("td:even").css("opacity","0.2")
        
    })

图片切换

 $(function () {
        $("#btn1").click(function () {
            $("#img1").attr("src","images/xiammisuzu1.jpg");
        });
        $("#btn2").click(function () {
            $("#img1").attr("src","images/xiaomishuzu2.jpg");
        });
        $("#btn3").click(function () {

            $("#img1").attr("src","images/xiaomishuzu3.jpg");

        });
        $("#btn4").click(function () {
            $("#img1").removeAttr("src");
        });

        $("#btn5").click(function () {
            $("#img1").toggle(5000,"linear",function () {
                alert("图片切换完成1");
            });
            /*$("#img1").toggle(function () {
             alert("图片切换完成1");
             });*/
        });

        $("#btn6").click(function () {
            $("#img1").toggle(8000,"swing",function () {
                alert("图片切换完成2");
            })
        })

    });

 <img src="images/xiaomishuzu4.jpg"  width="610" height="300" id="img1"><br>
    <input type="button" id="btn1" value="切到图片1">
    <input type="button" id="btn2" value="切到图片2">
    <input type="button" id="btn3" value="切到图片3">
    <input type="button" id="btn4" value="移除图片">
    <input type="button" id="btn5" value="隐藏/显示图片1">
    <input type="button" id="btn6" value="隐藏/显示图片2">

相关文章

网友评论

      本文标题:jq全选反选

      本文链接:https://www.haomeiwen.com/subject/lvxvfqtx.html