首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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也会选中的实现代码的全部叙述，希望对大家有所帮助，如果大家想了解更多内容敬请关注三水点靠木！

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

- Author -

#龙加一个蛋

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

Javascript 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
jquery JSON的解析方式
Jul 25 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
JavaScript数组方法总结分析
May 06 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 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
css3 (2) SpringBoot(22) Normal From(1) capture(1) uniapp(4) JSON(10) self(1) MybatisPlus(2) tabBar(1) element-china-area-data(1)
You might like
PHP中获取内网用户MAC地址（WINDOWS/linux）的实现代码
2011/08/11 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php利用事务处理转账问题
2015/04/22 PHP
php获取系统变量方法小结
2015/05/29 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
js中方法重载如何实现？以及函数的参数问题
2013/08/01 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
python使用selenium实现批量文件下载
2019/03/11 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
利用python 下载bilibili视频
2020/11/13 Python
python3中编码获取网页的实例方法
2020/11/16 Python
python绘制汉诺塔
2021/03/01 Python
Java语言程序设计测试题改错题部分
2014/07/22 面试题
师德师风承诺书
2014/05/23 职场文书
银行求职信怎么写
2014/05/26 职场文书
群众路线剖析材料
2014/09/30 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python