jquery 验证 添加 批量删除

来源:互联网 发布:国际注册营养师 知乎 编辑:程序博客网 时间:2024/05/22 06:20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-2.1.0.js"></script>
<script>
$(function(){
var prov = new Array();
  prov[1] = "北京市";
  prov[2] = "天津市";
  prov[3] = "上海市";
  prov[4] = "重庆市";
  prov[5] = "河北省";
  prov[6] = "山西省";
  prov[7] = "台湾省";
  prov[8] = "辽宁省";
  prov[9] = "吉林省";
  prov[10] = "黑龙江省";
  prov[11] = "江苏省";
  prov[12] = "浙江省";
  prov[13] = "安徽省";
  prov[14] = "福建省";
  prov[15] = "江西省";
  prov[16] = "山东省";
  prov[17] = "河南省";
  prov[18] = "湖北省";
  prov[19] = "湖南省";
  prov[20] = "广东省";
  prov[21] = "甘肃省";
  prov[22] = "四川省";
  prov[23] = "贵州省";
  prov[24] = "海南省";
  prov[25] = "云南省";
  prov[26] = "青海省";
  prov[27] = "陕西省";
  prov[28] = "广西壮族自治区";
  prov[29] = "西藏自治区";
  prov[30] = "宁夏回族自治区";
  prov[31] = "新疆维吾尔自治区";
  prov[32] = "内蒙古自治区";
  prov[33] = "澳门特别行政区";
  prov[34] = "香港特别行政区";
  for (var i = 1; i < prov.length; i++) {
    $("#selectProv").append("<option>"+prov[i]+"</option>");
  }
  var city = new Array();
  city[1] = new Array("北京市");
  city[2] = new Array("天津市");
  city[3] = new Array("上海市");
  city[4] = new Array("重庆市");
  city[5] = new Array("保定市", "沧州市", "承德市", "邯郸市", "衡水市", "廊坊市", "秦皇岛市", "石家庄市", "唐山市", "邢台市", "张家口市");
  city[6] = new Array("长治市", "大同市", "晋城市", "晋中市", "临汾市", "吕梁市", "朔州市", "太原市", "忻州市", "阳泉市", "运城市");
  city[7] = new Array("高雄市", "高雄县", "花莲县", "基隆市", "嘉义市", "嘉义县", "苗栗县", "南投县", "澎湖县", "屏东县", "台北市", "台北县", "台东县", "台南市", "台南县", "台中市", "台中县", "桃园县", "新竹市", "新竹县", "宜兰县", "云林县", "彰化县");
  city[8] = new Array("鞍山市", "本溪市", "朝阳市", "大连市", "丹东市", "抚顺市", "阜新市", "葫芦岛市", "锦州市", "辽阳市", "盘锦市", "沈阳市", "铁岭市", "营口市");
  city[9] = new Array("白城市", "白山市", "长春市", "吉林市", "辽源市", "四平市", "松原市", "通化市", "延边朝鲜族自治州");
  city[10] = new Array("大庆市", "大兴安岭地区", "哈尔滨市", "鹤岗市", "黑河市", "鸡西市", "佳木斯市", "牡丹江市", "七台河市", "齐齐哈尔市", "双鸭山市", "绥化市", "伊春市");
  city[11] = new Array("常州市", "淮安市", "连云港市", "南京市", "南通市", "苏州市", "宿迁市", "泰州市", "无锡市", "徐州市", "盐城市", "扬州市", "镇江市");
  city[12] = new Array("杭州市", "湖州市", "嘉兴市", "金华市", "丽水市", "宁波市", "衢州市", "绍兴市", "台州市", "温州市", "舟山市");
  city[13] = new Array("安庆市", "蚌埠市", "亳州市", "巢湖市", "池州市", "滁州市", "阜阳市", "合肥市", "淮北市", "淮南市", "黄山市", "六安市", "马鞍山市", "宿州市", "铜陵市", "芜湖市", "宣城市");
  city[14] = new Array("福州市", "龙岩市", "南平市", "宁德市", "莆田市", "泉州市", "三明市", "厦门市", "漳州市");
  city[15] = new Array("抚州市", "赣州市", "吉安市", "景德镇市", "九江市", "南昌市", "萍乡市", "上饶市", "新余市", "宜春市", "鹰潭市");
  city[16] = new Array("滨州市", "德州市", "东营市", "菏泽市", "济南市", "济宁市", "莱芜市", "聊城市", "临沂市", "青岛市", "日照市", "泰安市", "威海市", "潍坊市", "烟台市", "枣庄市", "淄博市");
  city[17] = new Array("安阳市", "鹤壁市", "济源市", "焦作市", "开封市", "洛阳市", "漯河市", "南阳市", "平顶山市", "濮阳市", "三门峡市", "商丘市", "新乡市", "信阳市", "许昌市", "郑州市", "周口市", "驻马店市");
  city[18] = new Array("鄂州市", "恩施土家族苗族自治州", "黄冈市", "黄石市", "荆门市", "荆州市", "潜江市", "神农架林区", "十堰市", "随州市", "天门市", "武汉市", "仙桃市", "咸宁市", "襄樊市", "孝感市", "宜昌市");
  city[19] = new Array("长沙市", "常德市", "郴州市", "衡阳市", "怀化市", "娄底市", "邵阳市", "湘潭市", "湘西土家族苗族自治州", "益阳市", "永州市", "岳阳市", "张家界市", "株洲市");
  city[20] = new Array("潮州市", "东莞市", "佛山市", "广州市", "河源市", "惠州市", "江门市", "揭阳市", "茂名市", "梅州市", "清远市", "汕头市", "汕尾市", "韶关市", "深圳市", "阳江市", "云浮市", "湛江市", "肇庆市", "中山市", "珠海市");
  city[21] = new Array("白银市", "定西市", "甘南藏族自治州", "嘉峪关市", "金昌市", "酒泉市", "兰州市", "临夏回族自治州", "陇南市", "平凉市", "庆阳市", "天水市", "武威市", "张掖市");
  city[22] = new Array("阿坝藏族羌族自治州", "巴中市", "成都市", "达州市", "德阳市", "甘孜藏族自治州", "广安市", "广元市", "乐山市", "凉山彝族自治州", "泸州市", "眉山市", "绵阳市", "内江市", "南充市", "攀枝花市", "遂宁市", "雅安市", "宜宾市", "资阳市", "自贡市");
  city[23] = new Array("安顺市", "毕节地区", "贵阳市", "六盘水市", "黔东南苗族侗族自治州", "黔南布依族苗族自治州", "黔西南布依族苗族自治州", "铜仁地区", "遵义市");
  city[24] = new Array("白沙黎族自治县", "保亭黎族苗族自治县", "昌江黎族自治县", "澄迈县", "儋州市", "定安县", "东方市", "海口市", "乐东黎族自治县", "临高县", "陵水黎族自治县", "琼海市", "琼中黎族苗族自治县", "三亚市", "屯昌县", "万宁市", "文昌市", "五指山市");
  city[25] = new Array("保山市", "楚雄彝族自治州", "大理白族自治州", "德宏傣族景颇族自治州", "迪庆藏族自治州", "红河哈尼族彝族自治州", "昆明市", "丽江市", "临沧市", "怒江傈傈族自治州", "曲靖市", "思茅市", "文山壮族苗族自治州", "西双版纳傣族自治州", "玉溪市", "昭通市");
  city[26] = new Array("果洛藏族自治州", "海北藏族自治州", "海东地区", "海南藏族自治州", "海西蒙古族藏族自治州", "黄南藏族自治州", "西宁市", "玉树藏族自治州");
  city[27] = new Array("安康市", "宝鸡市", "汉中市", "商洛市", "铜川市", "渭南市", "西安市", "咸阳市", "延安市", "榆林市");
  city[28] = new Array("百色市", "北海市", "崇左市", "防城港市", "贵港市", "桂林市", "河池市", "贺州市", "来宾市", "柳州市", "南宁市", "钦州市", "梧州市", "玉林市");
  city[29] = new Array("阿里地区", "昌都地区", "拉萨市", "林芝地区", "那曲地区", "日喀则地区", "山南地区");
  city[30] = new Array("固原市", "石嘴山市", "吴忠市", "银川市", "中卫市");
  city[31] = new Array("阿克苏市", "阿拉尔市", "阿勒泰市", "阿图什市", "博乐市", "昌吉市", "阜康市", "哈密市", "和田市", "喀什市", "克拉玛依市", "库尔勒市", "奎屯市", "米泉市", "石河子市", "塔城市", "图木舒克市", "吐鲁番市", "乌鲁木齐市", "乌苏市", "五家渠市", "伊宁市");
  city[32] = new Array("阿拉善盟", "巴彦淖尔市", "包头市", "赤峰市", "鄂尔多斯市", "呼和浩特市", "呼伦贝尔市", "通辽市", "乌海市", "乌兰察布市", "锡林郭勒盟", "兴安盟");
  city[33] = new Array("澳门特别行政区");
  city[34] = new Array("香港特别行政区");
  $("#selectProv").on("change",function(){
    $("#selectCity").children("option").detach();
    $("#selectCity").append("<option>请选择市区</option>");
    var indexProv = $("#selectProv>option:selected").index();//取得选中的想的数组下标0
    if (indexProv > 0) {
      for (var i = 0; i < city[indexProv].length; i++) {
        $("#selectCity").append("<option>" + city[indexProv][i] + "</option>");
      }
      console.log( $("#selectProv>option:selected").val() + $("#selectCity>option:first").val() );
    }else {
      console.log( "请选择省份" );
    }
  });
  $("#selectCity").on("change",function(){
    console.log( $("#selectProv>option:selected").val() + $("#selectCity>option:selected").val() );
  });
 
<!--------------------点击注册 --------------------->
var i = 0;
$("#btn").click(function(){
var $name = $("#name").val();
var flag1 = false;
var flag2 = false;
//用户名不为空
if($name==""||$name==null){
alert("不能为空");
flag1 = false;
}else{
flag1 = true;
}
//密码长度在4-6之间
var $password = $("#password").val();
if($password.length>=4&&$password.length<=16){
flag2 = true;
}else{
alert("长度4-16");
flag2 = false;
}

if(flag1==true && flag2==true){
var $name = $("#name").val();
var $password = $("#password").val();
var $age = $("#age").val();
var $sex = $("[name='sex']").val();
var $selectProv = $("#selectProv").val();
var $selectCity = $("#selectCity").val();
//alert($sex+$selectProv+$selectCity);
var $table = $("#table");
i++;
$table.append("<tr class="+i+"><td><input type='checkbox' id='Check[]' name='Check[]' value="+i+" /></td><td>"+$name+"</td><td>"+$password+"</td><td>"+$age+"</td><td>"+$sex+"</td><td>"+$selectProv+$selectCity+"</td></tr>");

}
});
//全选
$("#CheckAll").bind("click",function(){           
      $("input[name='Check[]']").prop("checked",this.checked);           
  }); 
<!--------------------点击删除 --------------------->
$("#Delete").click(function(){
if(confirm('确定要删除所选吗?')){ 
      var checks = $("input[name='Check[]']:checked");
//    alert(checks.length+"+");
      if(checks.length == 0){
      alert('未选中任何项!');
      return false;
      }
      //将获取的值存入数组 
      checks.each(function(){ 
//    alert($(this).val());
      $("[class="+$(this).val()+"]").remove();
      });   
     
      }
   });
});
</script>
</head>
<body>
<h3>用户注册</h3>
<table>
<tr>
<td>用户名:</td>
<td><input type="text"/ id="name"></td>
</tr>
<tr>
<td>密     码:</td>
<td><input type="password"/ id="password"></td>
</tr>
<tr>
<td>年  龄:</td>
<td><input type="number"/ id="age"></td>
</tr>
<tr>
<td>性  别:</td>
<td><input type="radio"/ name="sex" value="男"  checked>男 <input type="radio"/ name="sex" value="女">女</td>
</tr>
<tr>
<td>住  址:</td>
<td>
所在省市
<select id="selectProv" onchange="prov_onChange()">
  <option>请选择省份</option>
</select>
<select id="selectCity" onchange="city_onChange()">
  <option>请选择市区</option>
</select>




</td>
</tr>
<tr>
<td colspan="2"><center><button id="btn">提交</button></center></td>
</tr>
</table><br /><br />
<h3>批量删除</h3>
<input id="Delete" name="Delete" type="button" value=" 删 除 " class="btn btn-danger radius"/> 
<table cellpadding="0" cellspacing="0" border="1 solid red" width="500px" id="table">
<tr>
<th><input type="checkbox" id="CheckAll" name="CheckAll"/></th>
<th>用户名</th>
<th>密 码</th>
<th>年 龄</th>
<th>性 别</th>
<th>住 址</th>
</tr>
</table>

</body>
</html>