编程 Javascript

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也会选中的实现代码

- Author -

#龙加一个蛋

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery阻止事件冒泡具体实现

Oct 11 Javascript

jquery图片切换插件

Mar 16 Javascript

jQuery表单验证功能实例

Aug 28 Javascript

Web前端新人笔记之jquery入门心得(新手必看)

May 17 Javascript

js获取form表单所有数据的简单方法

Aug 18 Javascript

jquery datatable服务端分页

Aug 31 Javascript

详解RequireJS按需加载样式文件

Apr 12 Javascript

echarts学习笔记之图表自适应问题详解

Nov 22 Javascript

vuex 的简单使用

Mar 22 Javascript

JavaScript实现省份城市的三级联动

Feb 11 Javascript

Javascript作用域和作用域链原理解析

Mar 03 Javascript

Element Collapse 折叠面板的使用方法

Jul 26 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

php模拟post行为代码总结(POST方式不是绝对安全）

2012/02/22 PHP

PHP函数实现分页含文本分页和数字分页

2014/10/23 PHP

php实现可逆加密的方法

2015/08/11 PHP

php使用ffmpeg向视频中添加文字字幕的实现方法

2016/05/23 PHP

php封装的单文件(图片)上传类完整实例

2016/10/18 PHP

一个简单的JavaScript数据缓存系统实现代码

2010/10/24 Javascript

Javascript自定义函数判断网站访问类型是PC还是移动终端

2014/01/10 Javascript

页面加载完毕后滚动条自动滚动一定位置

2014/02/20 Javascript

javascript实现根据身份证号读取相关信息

2014/12/17 Javascript

JavaScript数据结构与算法之栈详解

2015/03/12 Javascript

jQuery基于ajax()使用serialize()提交form数据的方法

2015/12/08 Javascript

Node.js Sequelize如何实现数据库的读写分离

2016/10/23 Javascript

jQuery实现根据生日计算年龄星座生肖

2016/11/23 Javascript

微信小程序实现animation动画

2018/01/26 Javascript

vue 多入口文件搭建 vue多页面搭建的实例讲解

2018/03/12 Javascript

boostrap模态框二次弹出清空原有内容的方法

2018/08/10 Javascript

vue根据值给予不同class的实例

2018/09/29 Javascript

微信小程序实现基于三元运算验证手机号/姓名功能示例

2019/01/19 Javascript

小程序实现自定义导航栏适配完美版

2019/04/02 Javascript

js判断一个对象是数组（函数）的方法实例

2019/12/19 Javascript

使用node.JS中的url模块解析URL信息

2020/02/06 Javascript

在Python中处理列表之reverse()方法的使用教程

2015/05/21 Python

浅谈Python用QQ邮箱发送邮件时授权码的问题

2018/01/29 Python

Python基础之条件控制操作示例【if语句】

2019/03/23 Python

Python通过cv2读取多个USB摄像头

2019/08/28 Python

Django+python服务器部署与环境部署教程详解

2020/03/30 Python

keras分类模型中的输入数据与标签的维度实例

2020/07/03 Python

浅析python 字典嵌套

2020/09/29 Python

英国花园家具中心：Garden Furniture Centre

2017/08/24 全球购物

新英格兰最大的特色礼品连锁店：The Paper Store

2018/07/23 全球购物

应届大学生自荐信

2013/12/05 职场文书

数控专业自荐书范文

2014/03/16 职场文书

学雷锋标语

2014/06/25 职场文书

2015年库房管理工作总结

2015/10/14 职场文书

Java实现房屋出租系统详解

2021/10/05 Java/Android

分享7个 Python 实战项目练习

2022/03/03 Python