JQuery全选，反选，批量删除

最新推荐文章于 2024-05-08 17:11:32 发布

原创最新推荐文章于 2024-05-08 17:11:32 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用HTML和JavaScript创建的表单示例，包括表单验证、数据提交及表格内容的动态增删功能。文章详细展示了如何通过JavaScript进行表单元素的交互控制，并实现了全选、反选及批量删除等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>周考二</title>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
       <style type="text/css">
           #quanxuan{
               background-color: yellow;
               margin-left: 60px;
               margin-top: 10px;
               margin-bottom: 10px;
           }
           #shanchu{
               background-color: red;
               margin-top: 10px;
               margin-bottom: 10px;
           }
           /*
           隔行变色*/
               tr:nth-child(odd) {background-color: royalblue;}
            tr:nth-child(even) {background-color: gold;}
            tr:nth-child(1) {background-color: teal;}
       </style>
   </head>
   <body>
       <form action="#" id="f">
           姓名：<input type="text" id="name" />
       性别：<select id="sex">
                <option>男</option>
                 <option>女</option>
            </select>

       生日：<input type="text" id="birthday" />
       住址：<select id="sheng">
                <option>北京</option>
            </select>
            <select id="shi">
                <option>西二旗</option>
            </select>
            <input type="submit" value="添加" /><br />

       </form>
       <input type="button" id="quanxuan" value="全选" onclick="quanxuan()"/><input type="button" id="fanxuan" value="反选" /><input type="button" id="shanchu" value="批量删除" />
       <br />
       <table border="1px" cellspacing="0px" cellpadding="0px" id="t">
            <tr>
               <td><input type="checkbox" checked="checked"/></td>
                <td>姓名</td>
                <td>性别</td>
                <td>生日</td>
                <td>住址址</td>
                <td>删除</td>
            </tr>
        </table>





       
       <script type="text/javascript">

           //页面加载的时候，就要将省的信息，和市的信息添加到页面
            var arr = new Array();
            arr["山西"]=new Array("运城","太原");
            arr["山东"]=new Array("济南","青岛","单县");
            //先将省放入第一个下拉菜单
            for(sheng in arr){
                $("#sheng").append("<option>"+sheng+"</option>");
            }
            //-----------------------------------市----
            //当省的下拉改变的时候，市做相应的显示
            $("#sheng").change(function(){
                //每次清空一下，防止重复
                $("#shi").empty();
                $("#shi").append("<option></option>");
                //根据省取出市，放入第二个下拉菜单
                var s1 = $("#sheng").val();
                var shis = arr[s1];//shis是个数组
                for(shi in shis){
                    var s2 = shis[shi];
                    $("#shi").append("<option>"+s2+"</option>");
                }
            });
           //表单验证
           $("#f").submit(function(){
               //获取名字，验证是否不小于3个字符且不大于30个字符
                var username = $("#name").val();
                if (username.length<3||username.length>30) {
                    alert("姓名必须大于3个字符且不大于30个字符")
                    return;//结束方法
                }
                //生日非空
                var birthday = $("#birthday").val();
                if (birthday == "") {
                    alert("生日不能为空")
                    return;//结束方法
                }
                //获取地址

                var address = $("#sheng").val()+"-"+$("#shi").val();
                //获取性别
                var sex = $("#sex").val();
                //添加到页面
                var tr = "<tr><td><input type='checkbox' class='checkbox'/></td><td>"+username+"</td><td>"+sex+"</td><td>"+birthday+"</td><td>"+address+"</td><td><input type = 'button' value = '删除' onclick = 'dele(this)'/></td></tr>"
                $("#t").append(tr);

           });
              //删除的方法
            function dele(a){
               //弹出框提示
               alert("确定删除吗？");
                a.parentNode.parentNode.remove();
            }
                     //全选
          function quanxuan(){

           var cbs = document.getElementsByClassName("checkbox");
//           for(var i = 0;i<cbs.length;i++){
//               var cb = cbs[i];
//               cb.checked = true;
//           }
           var cbs = $(".checkbox");
            for(var i = 0;i<cbs.length;i++){
               var cb = cbs[i];
               cb.checked = true;
           }

          }
          //反选


//           var cbs = document.getElementsByClassName("checkbox");
//           for(var i = 0;i<cbs.length;i++){
//               var cb = cbs[i];
//               cb.checked = !cb.checked;
//           }
           $("#fanxuan").click(function(){
               var cbs = $(".checkbox");
            for(var i = 0;i<cbs.length;i++){
               var cb = cbs[i];
               cb.checked = !cb.checked;
           }
           });

             //批量删除
          $("#shanchu").click(function(){
             var flag = false;
               var arr = new Array();
              //判断是否选中
              var cbs = $(".checkbox");
              for(var i = 0;i<cbs.length;i++){
               var cb = cbs[i];
               if(cb.checked == true){
                   flag=true;
                   arr.push(cb);
               }
           }
              if(flag==false){
                  alert("至少选择一个");
              }else{
                  var b = confirm("确定删除吗？");
                  if(b){
                      //遍历删除
                      for(var j = 0;j<arr.length;j++){
                          var nn = arr[j];
                          nn.parentNode.parentNode.remove();
                      }
                  }
              }
            })


//          //批量删除
//           $("#shanchu").click(function(){
//               var flag = false;
//               var arr = new Array();
//               //判断是否有选中的
//               var cbs = document.getElementsByName("cb");
//               var cbs = $("input[type=checkbox]");
//               //如果没有，提示
//               for (var i = 1;i<cbs.length;i++) {
//                   var cb = cbs[i];
//                   if (cb.checked==true) {
//                       flag=true;
//                       arr.push(cb);
//                   }
//               }
//               //如果有的话，提示删除
//               if (flag==false) {
//                   alert("请至少选中一个");
//               } else{
//                   //确认删除，删除
//                   var b = confirm("确定是否删除");
//                   if(b==true){
//                       //再次遍历，删除
//                   for(var j = 0;j<arr.length;j++){
//                       var cb = arr[j];
//                       cb.parentNode.parentNode.remove();
//                   }
//                   }
//               }
//
//           });


       </script>
   </body>
</html>