编程 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 相关文章推荐

js confirm()方法的使用方法实例

Jul 13 Javascript

javascript获取隐藏元素(display:none)的高度和宽度的方法

Jun 06 Javascript

Node.js与PHP、Python的字符处理性能对比

Jul 06 Javascript

js 动态修改css文件的方法

Aug 05 Javascript

jquery form表单获取内容以及绑定数据

Feb 24 Javascript

Bootstrap所支持的表单控件实例详解

May 16 Javascript

Javascript实现一个简单的输入关键字添加标签效果实例

Jun 01 Javascript

使用OPENLAYERS3实现点选的方法

Sep 24 Javascript

4个顶级JavaScript高级文本编辑器

Oct 10 Javascript

JavaScript设计模式之代理模式实例分析

Jan 16 Javascript

vue+iview动态渲染表格详解

Mar 19 Javascript

es6中class类静态方法，静态属性，实例属性，实例方法的理解与应用分析

Feb 15 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程序员不应该忽略的3点

2015/10/09 PHP

PHP多维数组转一维数组的简单实现方法

2015/12/23 PHP

jQuery 学习第五课 Ajax 使用说明

2010/05/17 Javascript

JavaScript:new 一个函数和直接调用函数的区别分析

2013/07/10 Javascript

javascript时间函数大全

2014/06/30 Javascript

jQuery实现多级联动下拉列表查询框

2016/01/18 Javascript

AngularJs concepts详解及示例代码

2016/09/01 Javascript

利用fecha进行JS日期处理

2016/11/21 Javascript

JS操作input标签属性checkbox全选的实现代码

2017/03/02 Javascript

Vue自定义图片懒加载指令v-lazyload详解

2020/12/31 Javascript

微信小程序tabBar底部导航中文注解api详解

2017/08/16 Javascript

JS使用Date对象实时显示当前系统时间简单示例

2018/08/23 Javascript

jQuery+vue.js实现的多选下拉列表功能示例

2019/01/15 jQuery

详解微信小程序-canvas绘制文字实现自动换行

2019/04/26 Javascript

vue实现后台管理权限系统及顶栏三级菜单显示功能

2019/06/19 Javascript

[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19

2018/08/21 DOTA

python获取当前计算机cpu数量的方法

2015/04/18 Python

Python Sqlite3以字典形式返回查询结果的实现方法

2016/10/03 Python

Python+selenium实现截图图片并保存截取的图片

2018/01/05 Python

python 机器学习之支持向量机非线性回归SVR模型

2019/06/26 Python

Django 请求Request的具体使用方法

2019/11/11 Python

python ubplot使用方法解析

2020/01/10 Python

150行python代码实现贪吃蛇游戏

2020/04/24 Python

葡萄牙鞋子品牌：Fair

2016/12/10 全球购物

Lowe’s加拿大：家居装修、翻新和五金店

2019/12/06 全球购物

Why do we need Unit test

2013/01/03 面试题

思想专业自荐信范文

2013/12/25 职场文书

生日派对邀请函

2014/01/13 职场文书

关于圣诞节的广播稿

2014/01/26 职场文书

前厅收银主管岗位职责

2014/02/04 职场文书

大学生新学期计划书

2014/04/28 职场文书

小学生推普周国旗下讲话稿

2014/09/21 职场文书

2014年妇联工作总结

2014/11/21 职场文书

React列表栏及购物车组件使用详解

2021/06/28 Javascript

JavaScript函数柯里化

2021/11/07 Javascript

JavaScript流程控制（分支）

2021/12/06 Javascript