jQuery id模糊选择器批量处理

最新推荐文章于 2021-08-04 09:28:14 发布

转载最新推荐文章于 2021-08-04 09:28:14 发布 · 410 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wz327/p/5122095.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用jQuery实现在网页上动态选择和切换地区功能，包括省份与城市的联动选择，以及全选和取消全选地区。通过事件绑定和属性操作，实现了地区选择的自动化处理。

    $("span[id^='province_']").each(function(index,obj){
       $(obj).bind("click",function(){
            var id=   $(obj).attr("id");
            var provinceId=id.substr("province_".length);
            $("#cityDivs_"+provinceId).toggle();
        });
   });

//选中省份时，自动选中省份下所有城市;取消省份，自动取消省份下所有城市
   $("input:checkbox[name='provinces']").each(function(index,obj){
       $(obj).bind("click",function(){
           var provinceId= $(obj).val();
           if(provinceId==0){//全国
              $("input:checkbox[name='provinces']").prop("checked",$(obj).is(':checked'));
              $("input:checkbox[name^='citys_']").prop("checked",$(obj).is(':checked'));
              $("span[id^='province_']").attr("style",$(obj).is(':checked')?"color:#4cae4c;font-weight: bold;":"");
           }else{
               var citys=$("input:checkbox[name='citys_"+provinceId+"']");
               if($(obj).is(':checked')){
                  $("#province_"+provinceId).attr("style","color:#4cae4c;font-weight: bold;");//RGB：Green
               }else{
                   $("#province_"+provinceId).attr("style","");
               }
                 citys.prop("checked",$(obj).is(':checked'));
           }
       });

   });