jq checked 跟selected的使用

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       .table {
           width: 300px;
           margin: 100px auto;
       }

       table {
           width: 300px;
           border: 1px solid #c0c0c0;
           text-align: center;
           border-collapse: collapse;
       border-spacing: 0;
       }

       th,
   td {
   border: 1px solid #d0d0d0;
   color: #404060;
   padding: 10px;
   }
   tbody tr {
   background-color: #fff;
   text-align: center;
   }

   thead tr {
       background-color: blue;
   }

   </style>
</head>
<body>
   <div class="table">
       <table>
       <thead>
           <tr>
               <th><input type="checkbox" id="all"></th>
               <th>菜名</th>
               <th>饭店</th>
           </tr>
       </thead>
       <tbody id="j_tb">
           <tr>
               <td><input type="checkbox" id="one"></td>
               <td>红烧肉</td>
               <td>田老师</td>
           </tr>
           <tr>
               <td><input type="checkbox" id="two"></td>
               <td>红烧肉</td>
               <td>田老师</td>
           </tr>
           <tr>
               <td><input type="checkbox" id="san"></td>
               <td>红烧肉</td>
               <td>田老师</td>
           </tr>
           <tr>
               <td><input type="checkbox" id="four"></td>
               <td>红烧肉</td>
               <td>田老师</td>
           </tr>
       </tbody>
   </table>
   </div>
   <script src="jquery-1.12.4.js"></script>

$("#all").click(function(){

$("#j_tb input").prop("checked",$(this).prop("checked"));
});

           // $("#j_tb input").click(function () {

       // if($("#j_tb input:checked").length == $("#j_tb input").length){
       // $("#all").prop("checked", true)
       // }else {
       // $("#all").prop("checked", false)
       // }

       // });
       //
       $("#j_tb input").click(function(){

               if($("#j_tb input:checked").length == $("#j_tb input").length)
               {
                   $("#all").prop("checked",true);
               }

               else
               {
                   $("#all").prop("checked",false);
               }
       });
       });
   </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       select {
           width: 200px;
           height: 200px;
           background-color: teal;
           font-size: 20px;
       }

       .btn-box {
           width: 30px;
           display: inline-block;
           vertical-align: top;
       }
   </style>
</head>
<body>
   <h1>城市的选择:</h1>
   <select name="src-city" id="src-city" multiple>
       <option value="1">北京</option>
       <option value="2">上海</option>
       <option value="3">深圳</option>
       <option value="4">广州</option>
       <option value="5">西红柿</option>
   </select>

<select id="tar-city" name="tar-city" multiple>

</select>

<script src="jquery-1.12.4.js"></script>

$("#src-city>option").appendTo("#tar-city");
});

           $("#btn2").click(function(){
               $("#tar-city>option").appendTo("#src-city");
           });

$("#btn3").click(function(){

               $("#src-city>option:selected").appendTo("#tar-city");
           });
       });
   </script>
</body>
</html>

jq checked 跟selected的使用

猜你喜欢