天天看點

jQuery的eq選擇器+全選和反選

源碼:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <table >
        <tr>
            <td><input type="checkbox" value="1"></td>
            <td>豹女</td>
            <td>300</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="2"></td>
            <td>龍女</td>
            <td>300</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="3"></td>
            <td>提摩</td>
            <td>320</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="4"></td>
            <td>琴女</td>
            <td>350</td>
        </tr>
    </table>

    <input type="button" value="點選選擇第幾個使用eq選擇器" id="eqBtn">
    <input type="button" value="點選選擇第1個使用first選擇器" id="firstBtn">
    <input type="button" value="點選選擇最後一個使用first選擇器" id="lastBtn">
    <input type="button" value="全選" id="allBtn">
    <input type="button" value="點選檢視,已經選中的" id="checkedBtn">
    <input type="button" value="點選檢視,沒有選中的" id="nocheckedBtn">
    <input type="button" value="反選" id="overBtn">
    <input type="button" value="反選更新版" id="overBtn1">

    <script>
        $(function() {
            //jquery使用 過濾選擇器 達到 奇偶數變色
            //同時也學了 jquery操作css
            $('table tr:even').css('background-color','pink');
            $('table tr:odd').css('background-color','blue');

            $('#eqBtn').click(function() {
              var timo=$('table tr:eq(3)');
              //console.log(timo);
              //練習:如何找到 <td>提摩</td>
              //var timo=$('table tr:eq(2) td:eq(1) ').text();
              console.log(timo);
            })
            //拿取 第一個
            $("#firstBtn").click(function() {
              var first=$('table tr:first').html();
              console.log(first);
            })
            //拿取  最後一個
            $("#lastBtn").click(function() {
              var last=$('table tr:last').text();
              console.log(last);
            })
            //全選  -----用來批量删除
            $('#allBtn').click(function() {
                //思路:找出所有  cheackbox 的td,周遊 ,讓其選中 即可
              // $('table tr td>input')
              $.each($('table tr td>input'),function(index, value) {
                //   console.log(index); 
                //   console.log(value);
                  console.log( $(this).val())  //周遊取值  
                  $(this).prop('checked',true);  //全選
              })
            })

        //點選檢視  已經選中的
        $('#checkedBtn').click(function() {
            //使用 過濾選擇器  可以選中:
            //$('table tr td>input:checked')
            //周遊 取值
            $.each($('table tr td>input:checked'), function(index, value) {
                console.log($(this).val());
            })   

       })

        //點選檢視  沒有選中的
        $('#nocheckedBtn').click(function() {
            console.log($('table tr td>input:not(:checked)').val());

        }) 
            
            //反選
            $('#overBtn').click(function() {
                //思路:周遊每個 input ,如果是 選中,則給予 未選中
                //反過來,如果是 未選中,則給予 選中
                $.each($('table tr td>input'), function(index, value) {  
                 var istrue=$(this).prop('checked');
                 console.log(istrue);
                 if(istrue){
                    //如果 istrue 等于 true  代表被選中了
                    $(this).prop('checked',false);
                 }else{
                    $(this).prop('checked',true);
                 }
                
              })
            })
            //更新版
            $('#overBtn1').click(function() {
              $.each($('table tr td>input'), function(index, value) {
                  $(this).prop('checked',!($(this).prop('checked')));   
              })  
            })

        })


    </script>



</body>
</html>
           

效果圖:

jQuery的eq選擇器+全選和反選

繼續閱讀