表单的勾选删除

来源：互联网发布：mac book air能吃鸡吗编辑：程序博客网时间：2024/05/19 13:16
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script></head><body>   姓名：<input type="text" id="np">  年龄：<input type="number" id="pu"> 性别：<input type="text" id="ut" >   <input type="button" value="添加" id="in" >   <table>       <tr>           <th><input type='checkbox' id="ip">全选</th>           <th> 姓名</th>           <th> 年龄</th>           <th> 性别</th>           <th> 操作</th>       </tr>   </table>  <script>      var n=0;      $("#in").click(function () {            //获取输入的姓名          var xm=   $("#np").val();          var nl=   $("#pu").val();          var xb=   $("#ut").val();          //  alert(  $("#np").val())          //创建节点          $("table").append("<tr>"+"<td>"+"<input type='checkbox'>"+"</td>"+"<td>"+xm+"</td>"+"<td>"+nl+"</td>"+"<td>"+xb+"</td>"+"<td>"+"<span>删除</span>"+"</td>"+"</tr>");          $("table tr td span").click(function () {               //判断当前这个复选框被勾选了才能被删除              if($(this).parents("tr").find("input").prop("checked")==true){4                  $(this).parents("tr").remove();              }          });      });      //给"全选"一个点击事件，如果全选就把添加的input都设为true      $("#ip").click(function () {          if($("#ip").prop("checked")==true){              $("tr td input").prop("checked",true);          }else{              $("tr td input").prop("checked",false);          }      });      //把添加的input设置点击事件,在进行判断是否被勾选，计数器勾选一个就累计一个，然后判断input的长度和计数器是否相等，相等的话就把“全选的input勾选”      $("table").on("click","input",function () {              alert(0);          if($(this).prop("checked")==true){              n++;          }else{              n--;          }          if(n==$("tr td input").length){              $("#ip").prop("checked",true);          }else{              $("#ip").prop("checked",false);          }      });  </script></body></html>
阅读全文
0 0