checkbox 选中一个另一个checkbox也会选中的实现代码


Posted in Javascript onJuly 09, 2016
<!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 style="width:50%;">
<tr>
<td><input type="checkbox" id = "check1" /><label for="check1" class="do">全选</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也会选中的实现代码

以上所述是小编给大家介绍的checkbox 选中一个另一个checkbox也会选中的实现代码的全部叙述,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木!

Javascript 相关文章推荐
css图片自适应大小
Nov 28 Javascript
FLASH 广告之外的链接
Dec 16 Javascript
Jquery选择器 $实现原理
Dec 02 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 #Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 #Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 #Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 #Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 #Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 #Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 #Javascript
You might like
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
高三历史教学反思
2014/01/09 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
社区党员公开承诺书
2014/08/30 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
母亲去世追悼词
2015/06/23 职场文书
python实现简单的井字棋
2021/05/26 Python