本文给大家带来了checkbox选择器之checkbox 选中一个另一个checkbox也会选中的实现代码 ，非常不错，有需要的可以参考下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>CheckBox select</title>
<script type='text/javascript' src='jquery-3.0.0.js'></script>
<script type='text/javascript' >
$(document).ready(function(){
/****----全选----****/
//$('#check1').on('change',function(){
//$("#check1").bind("click",function(){
$('#check1').on('click',function(){
//方法一
if(this.checked==true){
$('input').prop('checked',true);
}
else{
$('input').prop('checked',false);
}
if($(".do").text()=="全选"){
$(".do").text("取消");
}
else{
$(".do").text("全选");
}
//方法二
//$('input[type=checkbox]').prop('checked',$(this).prop('checked'));
});
/****----第一列----****/
$('#checkl1').on('click',function(){
//方法一
if(this.checked==true){
$('#check11,#check21,#check31,#check41,#check51').prop('checked',true);
}
else{
$('#check11,#check21,#check31,#check41,#check51').prop('checked',false);
}
//方法二 如上
});
/****----第二列----****/
$('#checkl2').on('click',function(){
//方法一
if(this.checked==true){
$('#check12,#check22,#check32,#check42,#check52').prop('checked',true);
}
else{
$('#check12,#check22,#check32,#check42,#check52').prop('checked',false);
}
//方法二 如上
});
/****----第三列----****/
$('#checkl3').on('click',function(){
//方法一
if(this.checked==true){
$('#check13,#check23,#check33,#check43,#check53').prop('checked',true);
}
else{
$('#check13,#check23,#check33,#check43,#check53').prop('checked',false);
}
//方法二 如上
});
/****----第四列----****/
$('#checkl4').on('click',function(){
//方法一
if(this.checked==true){
$('#check14,#check24,#check34,#check44,#check54').prop('checked',true);
}
else{
$('#check14,#check24,#check34,#check44,#check54').prop('checked',false);
}
//方法二 如上
});
/****----第一行----****/
$('#checkh1').on('click',function(){
//方法一
if(this.checked==true){
$('#check11,#check12,#check13,#check14').prop('checked',true);
}else{
$('#check11,#check12,#check13,#check14').prop('checked',false);
}
//方法二 如上
});
/****----第二行----****/
$('#checkh2').on('click',function(){
//方法一
if(this.checked==true){
$('#check21,#check22,#check23,#check24').prop('checked',true);
}else{
$('#check21,#check22,#check23,#check24').prop('checked',false);
}
//方法二 如上
});
/****----第三行----****/
$('#checkh3').on('click',function(){
//方法一
if(this.checked==true){
$('#check31,#check32,#check33,#check34').prop('checked',true);
}else{
$('#check31,#check32,#check33,#check34').prop('checked',false);
}
//方法二 如上
});
/****----第四行----****/
$('#checkh4').on('click',function(){
//方法一
if(this.checked==true){
$('#check41,#check42,#check43,#check44').prop('checked',true);
}else{
$('#check41,#check42,#check43,#check44').prop('checked',false);
}
//方法二 如上
});
/****----第五行----****/
$('#checkh5').on('click',function(){
//方法一
if(this.checked==true){
$('#check51,#check52,#check53,#check54').prop('checked',true);
}else{
$('#check51,#check52,#check53,#check54').prop('checked',false);
}
//方法二 如上
});
});
</script>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" id = "check1" /><label for="check1">全选</label></td>
<td><input type="checkbox" id = "checkl1" /><label for="checkl1">第一列</label></td>
<td><input type="checkbox" id = "checkl2" /><label for="checkl2">第二列</label></td>
<td><input type="checkbox" id = "checkl3" /><label for="checkl3">第三列</label></td>
<td><input type="checkbox" id = "checkl4" /><label for="checkl4">第四列</label></td>
</tr>
<tr>
<td><input type="checkbox" id = "checkh1" /><label for="checkh1">第一行</label></td>
<td><input type="checkbox" id = "check11" /></td>
<td><input type="checkbox" id = "check12" /></td>
<td><input type="checkbox" id = "check13" /></td>
<td><input type="checkbox" id = "check14" /></td>
</tr>
<tr>
<td><input type="checkbox" id = "checkh2" /><label for="checkh2">第二行</label></td>
<td><input type="checkbox" id = "check21" /></td>
<td><input type="checkbox" id = "check22" /></td>
<td><input type="checkbox" id = "check23" /></td>
<td><input type="checkbox" id = "check24" /></td>
</tr>
<tr>
<td><input type="checkbox" id = "checkh3" /><label for="checkh3">第三行</label></td>
<td><input type="checkbox" id = "check31" /></td>
<td><input type="checkbox" id = "check32" /></td>
<td><input type="checkbox" id = "check33" /></td>
<td><input type="checkbox" id = "check34" /></td>
</tr>
<tr>
<td><input type="checkbox" id = "checkh4" /><label for="checkh4">第四行</label></td>
<td><input type="checkbox" id = "check41" /></td>
<td><input type="checkbox" id = "check42" /></td>
<td><input type="checkbox" id = "check43" /></td>
<td><input type="checkbox" id = "check44" /></td>
</tr>
<tr>
<td><input type="checkbox" id = "checkh5" /><label for="checkh5">第五行</label></td>
<td><input type="checkbox" id = "check51" /></td>
<td><input type="checkbox" id = "check52" /></td>
<td><input type="checkbox" id = "check53" /></td>
<td><input type="checkbox" id = "check54" /></td>
</tr>
</tbody>
</table>
</body>
</html>
以上所述是小编给大家介绍的checkbox 选中一个另一个checkbox也会选中的实现代码的全部叙述，希望对大家有所帮助
- 2016年绍兴嵊州市卫计局下属事业单位赴浙江中医药大学招聘参加体检名单
- 2017年国家海洋信息中心招聘笔试公告
- 2016年广安市协兴园区财政局招聘临时工作人员笔试成绩及面试相关事宜公告
- 巴中市恩阳区2016年考核招聘卫生专业技术人员体检合格列入考察政审对象公告
- 2016年洛阳市嵩县招聘面试人员名单及相关事宜公告(4)
- 阿坝州2016年招聘事业单位工作人员递补人员体检及考核有关事项公告
- 2016年台州市路桥区人民政府办公室下属区行政复议委员会办公室招聘公告
- 2016年洛阳市嵩县招聘面试二次平均法操作办法
- 2016年绍兴市越城区斗门镇卫生院招聘护理人员公告
- 贵阳市修文县2016年招聘事业人员第三批体检结果/政审名单和政审相关事宜
- 苏州昆山市周市镇2016年招聘创建办工作人员面试成绩及拟录用人员名单公示
- 陕西西安沣东新城管委会事业单位2016招聘拟录用人员公示
- 2016年温州市瑞安市卫生系统事业单位招聘拟聘用名单公告三
- 2016年河南科技大学第一附属医院招聘工作人员面试成绩公示
- 2016年日照市五莲县涉军人员公益性岗位面试通知
- 黔东南州2016年从江县专项招聘乡镇事业单位工作人员拟聘用人员公示(二)
- 2016年日照市五莲县涉军人员公益性岗位笔试成绩公示
- 2016年淮安市中医院招聘第二批专业技术人员拟聘用人员公示
- 2016年黔东南州从江县教育和科技局招聘保安实施方案
- 黔东南州从江县2016年招聘保安学校及名额分配统计表
- 2016年菏泽市东明县招聘电视新闻记者拟聘用人员名单公示
- 2016年濮阳市市直事业单位引进高学历人才报名入口
- 2016年濮阳市市直事业单位招聘报名入口
- 2016年濮阳市范县事业单位招聘工作人员报名入口
- 盐城市大丰麋鹿国家级自然保护区管理处2016年招聘进入体检考察人员名单公布
- secret location
- secretly
- secret marriage
- secret message
- secret negotiation
- secret of success
- secret operation
- secretory
- secretory pathway
- secretory protein
- 肝脑涂地
- 肝花
- 肝蛭
- 肝郁
- 肝阳
- 肝阴
- 肝风
- 肟
- 肠
- 肠子
- 英文自我介绍格式范文求职3篇
- 英文自我介绍范文初中3篇
- 英文自我简介优秀范文3篇
- 英文自我介绍范文带翻译3篇
- 英文自我介绍范文翻译3篇
- 中学英文自我介绍范文3篇
- 中英文个人介绍范文3篇
- 中英文自我介绍范文3篇
- 初中英语自我介绍范文3篇
- 初中自我介绍英语范文3篇