复选框：

多选的时候，在复选框的位置 ， name 属性要写成 “xxx[ ]”形式，PHP才能接收多个值（以数组的形式接收多个值），否则只有最后一个值

多选：

querySelector() ，querySelectorAll()

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
如果你需要返回所有的元素，请使用querySelectorAll() 方法替代
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。

.checked

if(ele.checked === true){undefined
alert(‘被选中’)
}
二、ele.checked ===false

if(ele.checked === false){undefined
alert(‘没被选中’)
}

  1. <?php
  2.     header("content-type:text/html;charset:utf-8");
  4.     $url="mysql:host=mysql;dbname=database_lesson_28577_14_11226";
  5.     $user="lesson_28577_14_11226";
  6.     $pwd="5a409adfbec378cd9dd3acf13ede872a";
  7.     $conn = new PDO($url,$user,$pwd);
  9.     if(isset($_GET["id"])){
  10.         $conn->exec("delete from mail where id={$_GET["id"]}+0");
  11.         if($conn>0){
  12.             echo "<scrtip>alert('删除成功');window.location='mail.php'</scrtip>";
  13.         }
  14.     }
  15.     if(isset($_GET["name"])){
  16.         foreach($_GET["name"] as $value){
  17.             $conn->exec("delete from mail where id={$value}+0");
  18.         }
  19.     }
  21.     $shuju1 = $conn->query("select * from mail")->fetchAll(PDO::FETCH_ASSOC);
  23. ?>
  24. <!DOCTYPE html>
  25. <html>
  26.     <head>
  27.         <meta charset="utf-8">
  28.         <style>
  29.             html,body{
  30.                 padding: 0;
  31.                 margin: 0px;
  32.                 width: 100%;
  33.                 height: 100%;
  34.                 background: #f2f2f2;
  35.             }
  36.             #body{
  37.                 height: 100%;
  38.                 width: 960px;
  39.                 background: #fff;
  40.                 margin: 0 auto;
  41.             }
  43.             form>div{
  44.                 border: 1px solid ;
  45.                 margin-top: 20px;
  46.             }
  47.             #quanxuan{
  48.                 display: flex;
  49.             }
  50.             .youjian{
  51.                 display: flex;
  52.             }
  53.             .youjian>div{
  54.                 margin-right: 30px;
  55.             }
  56.             .youjian>div:nth-child(2){
  57.                 width: 100px;
  58.                 padding-left: 5px;
  59.                 text-align: left;
  60.                 text-overflow:ellipsis;
  61.                 overflow: hidden;
  62.                 white-space: nowrap;
  63.             }
  64.             .youjian>div:nth-child(3){
  65.                 width: 270px;
  66.                 padding-left: 5px;
  67.                 text-align: left;
  68.                 text-overflow:ellipsis;
  69.                 overflow: hidden;
  70.                 white-space: nowrap;
  71.             }
  72.         </style>
  73.         <script>
  74.             window.onload=function(){
  75.                 let a = false;
  76.                 var all = document.querySelector("#all");
  77.                 var others = document.querySelectorAll(".dan");
  79.                 all.onclick = function(){
  80.                     a = !a;
  81.                     if(a){
  82.                         others.forEach(val =>{
  83.                             val.checked = true;
  84.                         })
  85.                     }else{
  86.                         others.forEach(val =>{
  87.                             val.checked = false;
  88.                         })
  89.                     }
  90.                 }
  91.             }
  92.         </script>
  93.     </head>
  94.     <body>
  95.         <div id="body">
  96.             <form action="mail.php" >
  97.                 <div id="quanxuan">
  98.                     <input type="checkbox" id="all"/>
  99.                     <a href="mail.php"><input type="submit" value="删除"/></a>
  100.                 </div>
  101.                 <?php foreach($shuju1 as $value){ ?>
  102.                     <div class="youjian">
  103.                         <input type="checkbox" name="name[]" value="<?php echo $value["id"]?>" class="dan"/>
  104.                         <div><?php echo $value["title"] ?></div>
  105.                         <div><?php echo $value["content"] ?></div>
  106.                         <div><?php echo $value["time"] ?></div>
  107.                         <a href="mail.php?id=<?php echo $value["id"] ?>"><div>删除</div></a>
  108.                     </div>
  109.                 <?php } ?>
  110.             </form>
  111.         </div>
  112.     </body>
  113. </html>