checkbox 全选 反选

最新推荐文章于 2018-04-09 15:58:58 发布
最新推荐文章于 2018-04-09 15:58:58 发布
阅读量362 收藏
点赞数
分类专栏： js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjutke/article/details/41241697
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- 引入 jQuery -->
<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){


var string=$("#supplyarea").val();
$("#china").click( function () {
if(this.checked){
 
$("[name=area],[name=province]:checkbox").attr("checked",true);

}else{

$("[name=province],[name=area]:checkbox").attr("checked",false);

}

});
$(".area").click(function(){
var chinaflag=true;
var id= $(this).attr("id");
if(this.checked){
$("input[type=checkbox]."+id).attr("checked",true);
}else{

$("input[type=checkbox]."+id).attr("checked",false);
}

$("input[type=checkbox].area").each(function (){
if(!this.checked){
chinaflag=false;
}

});
$("#china").attr("checked",chinaflag);

});
$("[name=province]:checkbox").click(function(){

var chinaflag=true;
var northchinaflag=true;
var northeastflag=true;
var eastchinaflag=true;
var middlesouthflag=true;
var southwestflag=true;
var northwestflag=true;
var otherflag=true;
$("[name=province]:checkbox").each(function(){
if(!this.checked){
var flag=$(this).attr("class");

if('northchina'==flag){ northchinaflag=false;chinaflag=false;}
if('northeast'==flag){ northeastflag=false;chinaflag=false;}
if('eastchina'==flag){ eastchinaflag=false;chinaflag=false;}
   if('middlesouth'==flag){ middlesouthflag=false;chinaflag=false;} 
if('southwest'==flag){ southwestflag=false;chinaflag=false;}
if('northwest'==flag){ northwestflag=false;chinaflag=false;}
if('other'==flag){otherflag=false;chinaflag=false;}

}

});
$("#china").attr("checked",chinaflag);
$("#northchina").attr("checked",northchinaflag);
$("#northeast").attr("checked",northeastflag);
$("#eastchina").attr("checked",eastchinaflag);
$("#middlesouth").attr("checked",middlesouthflag);
$("#southwest").attr("checked",southwestflag);
$("#northwest").attr("checked",northwestflag);
$("#other").attr("checked",otherflag);
});

init();

function init(){

var str=string.split(",");

for(var i=0;i<str.length;i++){
$("input[type=checkbox]").each(function(){
if($(this).val()==str[i]){

$(this).attr("checked",true);
}
});

}
var chinaflag=true;
var northchinaflag=true;
var northeastflag=true;
var eastchinaflag=true;
var middlesouthflag=true;
var southwestflag=true;
var northwestflag=true;
var otherflag=true;
$("[name=province]:checkbox").each(function(){
if(!this.checked){
var flag=$(this).attr("class");

if('northchina'==flag){ northchinaflag=false;chinaflag=false;}
if('northeast'==flag){ northeastflag=false;chinaflag=false;}
if('eastchina'==flag){ eastchinaflag=false;chinaflag=false;}
   if('middlesouth'==flag){ middlesouthflag=false;chinaflag=false;} 
if('southwest'==flag){ southwestflag=false;chinaflag=false;}
if('northwest'==flag){ northwestflag=false;chinaflag=false;}
if('other'==flag){otherflag=false;chinaflag=false;}

}

});
$("#china").attr("checked",chinaflag);
$("#northchina").attr("checked",northchinaflag);
$("#northeast").attr("checked",northeastflag);
$("#eastchina").attr("checked",eastchinaflag);
$("#middlesouth").attr("checked",middlesouthflag);
$("#southwest").attr("checked",southwestflag);
$("#northwest").attr("checked",northwestflag);
$("#other").attr("checked",otherflag);


}
});
</script>
</head>
<body>
<input type="checkbox" id="china"/> 全国<br ><br>
                               <input type="checkbox"  name="area" class="area" id="northchina"/> 华北地区
                               <input type="checkbox"   name="area" class="area" id="northeast"/> 东北地区
                               <input type="checkbox"   name="area" class="area" id="eastchina"/> 华东地区
                               <input type="checkbox"   name="area" class="area" id="middlesouth" />中南地区
                               <input type="checkbox"   name="area" class="area" id="southwest"/> 西南地区
                               <input type="checkbox"   name="area" class="area" id="northwest"/> 西北地区
                               <input type="checkbox"  name="area" class="area" id="other"/> 其他地区<br /><br>
                               <input type="checkbox" name="province" class="northchina" value="北京市" />北京市
                               <input type="checkbox" name="province" class="northchina" value="天津市" />天津市
                               <input type="checkbox" name="province" class="northchina" value="河北省" />河北省
                               <input type="checkbox" name="province" class="northchina" value="山西省" />山西省
                               <input type="checkbox" name="province" class="northchina" value="内蒙古自治区" />内蒙古自治区<br />
                              
                               <input type="checkbox" name="province" class="northeast" value="辽宁省" />辽宁省
                               <input type="checkbox" name="province" class="northeast" value="吉林省" />吉林省
                               <input type="checkbox" name="province" class="northeast" value="黑龙江省" />黑龙江省<br/>
                              
                               <input type="checkbox" name="province" class="eastchina" value="上海市" />上海市
                               <input type="checkbox" name="province" class="eastchina" value="江苏省" />江苏省
                               <input type="checkbox" name="province" class="eastchina" value="浙江省" />浙江省
                               <input type="checkbox" name="province" class="eastchina" value="安徽省" />安徽省
                               <input type="checkbox" name="province" class="eastchina" value="福建省" />福建省
                               <input type="checkbox" name="province" class="eastchina" value="江西省" />江西省
                               <input type="checkbox" name="province" class="eastchina" value="山东省" />山东省<br/>
                              
                               <input type="checkbox" name="province" class="middlesouth" value="河南省" />河南省
                               <input type="checkbox" name="province" class="middlesouth" value="湖北省" />湖北省
                               <input type="checkbox" name="province" class="middlesouth" value="湖南省" />湖南省
                               <input type="checkbox" name="province" class="middlesouth" value="广东省" />广东省
                               <input type="checkbox" name="province" class="middlesouth" value="海南省" />海南省
                               <input type="checkbox" name="province" class="middlesouth" value="广西壮族自治区" />广西壮族自治区<br />
                              
                              
                              <label> <input type="checkbox" name="province"  class="southwest" value="重庆市" />重庆市</label>
                               <input type="checkbox" name="province"  class="southwest" value="四川省" />四川省
                               <input type="checkbox" name="province"  class="southwest" value="贵州省" />贵州省
                               <input type="checkbox" name="province"  class="southwest" value="云南省" />云南省
                               <input type="checkbox" name="province"  class="southwest" value="西藏自治区" />西藏自治区<br />
                              
                               <input type="checkbox" name="province" class="northwest" value="陕西省" />陕西省
                               <input type="checkbox" name="province" class="northwest" value="甘肃省" />甘肃省
                               <input type="checkbox" name="province" class="northwest" value="青海省" />青海省
                               <input type="checkbox" name="province" class="northwest" value="宁夏回族自治区" />宁夏回族自治区
                               <input type="checkbox" name="province" class="northwest" value="新疆维吾尔自治区" />新疆维吾尔自治区<br />
                              
                               <input type="checkbox" name="province" class="other"    value="香港特别行政区" />香港特别行政区
                               <input type="checkbox" name="province"  class="other" value="澳门特别行政区" />澳门特别行政区
                               <input type="checkbox" name="province" class="other"  value="台湾省" />台湾省<br/>
  
  <input type="button"  id="save" value="确认">
                               


</body>
</html>
如是我闻hjy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
checkbox全选与反选
weixin_30443813的博客
07-27 95
用原生js跟jquery实现checkbox全选反选的一个例子 原生js： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox</title> </head> <bod...
checkbox 全选反选 可以根据小项判断大项是否勾选
zjutke的专栏
01-23 627
$(document).ready(function(){ $("#htxhsall").click( function () { if(this.checked){ $("[name=htxhs]:checkbox").attr("checked",true); }else{ $("[name=htxhs]:checkbox").attr("checked",f
checkbox 全部选或全不选
zyt_coder的专栏
03-09 387
${item.name}                                       ${item.user.nickname}                                       ${item.user.sex==0?'男':'女'}
miniui 表格默认勾选全部数据
宁致
01-16 8154
grid.on("update", function (e) {  var rows = grid.findRows(function (row) {       return true;         });    grid.selects(rows); });
checkbox 设置为选中和未选中状态
热门推荐
LzwGlory的专栏
04-11 2万+
$("#checkAll").prop("checked",false);//重新请求数据的时候把全选框变为未选中
jquery、js操作checkbox全选反选
10-26
以上就是使用 jQuery 和 JavaScript 操作 checkbox 全选和反选的基本方法。在实际应用中，你可以根据需要调整这些函数，例如添加事件监听器，使得全选/反选按钮可以触发这些功能。在网页开发中，这样的功能能够显著...
android checkbox全选反选
01-09
"Android CheckBox全选反选"这个话题主要涉及如何在ListView中实现CheckBox的选择与反选择操作，包括全选和反选的功能。ListView是Android系统提供的一种列表视图，它可以显示大量数据并允许用户进行交互。下面我们...
jquery checkbox全选反选效果代码
10-29
jquery checkbox全选反选效果代码,需要的朋友可以参考下。
3分钟写出来的Jquery版checkbox全选反选功能
10-26
checkbox全选反选的文章在以前也有介绍很多，实在是不想在提起了，然而身边还是有些朋友不会，于是3分钟写出来一个估计有很多bug
jquery、js操作checkbox全选反选.docx
01-19
### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中，Checkbox（复选框）是一种非常常见的用户界面元素，用于收集用户的多选输入。尤其是在表单设计时，Checkbox的全选与反选功能极大地方便了...
CheckBox在表格中全选、部分选和反选
游海东的技术专栏
07-03 6330
1、源码如下，TableCheckBox.html TableCheckBox.html： Table中的CheckBox body { width:100%; height:100%; font-size:12px; } table { width:80%; height:100%; }
checkbox全选和单选操作
XuJiangDong
09-23 4532
复选框全选点击事件：页面： onclick="selectAllCheck(this,'ids');"/** * 复选框全选操作,obj为全选框对象，selname为复选框name * @param obj * @param selname * @constructor */ function selectAllCheck(obj, selname) { var el = docu
checkbox选中显示 freemarker
streetlight8023的专栏
11-10 2425
 审核状态：                                                                                                                           selected>  未审核                                               
选中CheckBoxList第一项实现全选/反选CheckBoxList所有项
Kenyon的专栏
02-07 1709
CS:        cbl_Groups.Items[0].Attributes.Add("onclick", "Select(this.checked)"); JS: function Select(chkAll) {                for(var   i=0;i        {               if(form1.elements[i].type=="ch
在页面全选和反选checkBox，批量操作
lslby123的博客
04-09 1139
全选与反选/* 全选与反全选 */ function checkAll(){ var checklist = document.getElementsByName ("check_ck"); if(document.getElementById("selectAll").checked){ for(var i=0;i&lt;checklist.len...
checkbox实现全选和反选代码
不忘初心的博客
11-06 1673
发现网上写的全选的代码，不是完整的，是有bug的。全选它分几种情况 1. 全选的checkbox选中时，子checkbox全部选中。反之，全部不选 2.子checkbox中，只要有没有被选中的，取消全选checkbox的选中 3.子checkbox的数量和子checkbox被选中的数量一样时，全选checkbox要被选中 [javascript] view plainc
js 获取日期xxxx-xx-xx格式
zjutke的专栏
06-30 3881
var datetime = new Date(); var year=datetime.getFullYear();//获取完整的年份(4位,1970) var month=datetime.getMonth()+1;//获取月份(0-11,0代表1月,用的时候记得加上1) if(month<=9){ month="0"+m
jquery unbind 无效
zjutke的专栏
04-24 3559
jquery中的unbind只对某个事件是通过JQUERY的bind函数动态绑定的事件才有解除的效果，如果你的td的ondblclick是通过bind绑定的，则unbind有效，但你的td的ondblclick是通过html中已经赋给它双击事件了，故unbind是没用的。 所以用原始的js方法 去除事件： document.getElementById("submitrefre
js给所有a标签加个随机参数，防止页面缓存
zjutke的专栏
09-09 2956
window.setInterval(refresh, 1000); function refresh(){ var r=new Date().getTime() + Math.random() + Math.random(); $("a").each(function(){ var v = $(this).attr("href"); if(v!=undefi
Android Recyclerview+checkbox全选反选
最新发布
03-14
这个问题可以回答。你可以使用一个全选的checkbox来控制所有子checkbox的选中状态，当全选checkbox被选中时，遍历所有子checkbox并将它们的选中状态...对于反选，你可以遍历所有子checkbox，将它们的选中状态取反即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值