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

document 和 document.all 分别什么时候用

Jun 22 Javascript

如何让页面加载完成后执行js

Jun 26 Javascript

javascript跨浏览器的属性判断方法

Mar 16 Javascript

快速掌握Node.js中setTimeout和setInterval的使用方法

Mar 21 Javascript

Bootstrap页面标题Page Header的实现方法

Mar 22 Javascript

JavaScript数据结构之广义表的定义与表示方法详解

Apr 12 Javascript

js实现字符全排列算法的简单方法

May 01 Javascript

js实现图片上传预览原理分析

Jul 13 Javascript

Vue实现内部组件轮播切换效果的示例代码

Apr 07 Javascript

详解使用Next.js构建服务端渲染应用

Jul 10 Javascript

uni app仿微信顶部导航条功能

Sep 17 Javascript

JS跨浏览器解析XML应用过程详解

Oct 16 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 CURL获取邮箱地址的详解

2013/06/03 PHP

Symfony页面的基本创建实例详解

2015/01/26 PHP

Symfony2框架学习笔记之表单用法详解

2016/03/18 PHP

PHP的Yii框架中创建视图和渲染视图的方法详解

2016/03/29 PHP

php 算法之实现相对路径的实例

2017/10/17 PHP

js动态创建表格,删除行列的小例子

2013/07/20 Javascript

javascript简单实现命名空间效果

2014/03/06 Javascript

JS实现登录页面记住密码和enter键登录方法推荐

2016/05/10 Javascript

基于Vue.js的表格分页组件

2016/05/22 Javascript

通用无限极下拉菜单的实现代码

2016/05/31 Javascript

js HTML5多图片上传及预览实例解析（不含前端的文件分割）

2016/08/26 Javascript

js实现打地鼠小游戏

2017/02/13 Javascript

vue实现验证码输入框组件

2017/12/14 Javascript

js实现手机web图片左右滑动效果

2017/12/29 Javascript

解决webpack dev-server不能匹配post请求的问题

2018/08/24 Javascript

HTML+JavaScript实现扫雷小游戏

2019/09/30 Javascript

vue项目出现页面空白的解决方案

2019/10/31 Javascript

在Python中操作字典之update()方法的使用

2015/05/22 Python

Python升级导致yum、pip报错的解决方法

2017/09/06 Python

python dataframe常见操作方法:实现取行、列、切片、统计特征值

2018/06/09 Python

解决Pycharm界面的子窗口不见了的问题

2019/01/17 Python

在python中使用pymysql往mysql数据库中插入(insert)数据实例

2020/03/02 Python

配置python的编程环境之Anaconda + VSCode的教程

2020/03/29 Python

opencv 实现特定颜色线条提取与定位操作

2020/06/02 Python

完美解决keras 读取多个hdf5文件进行训练的问题

2020/07/01 Python

Web前端页面跳转并取到值

2017/04/24 HTML / CSS

美国礼品卡商城： Gift Card Mall

2017/08/25 全球购物

华为慧通笔试题

2016/04/22 面试题

如何开发安全的AJAX应用

2014/03/26 面试题

旅游管理毕业生自荐信范文

2014/03/19 职场文书

我的画教学反思

2014/04/28 职场文书

行政部经理助理岗位职责

2014/06/15 职场文书

2014年化验员工作总结

2014/11/18 职场文书

初中信息技术教学反思

2016/02/16 职场文书

导游词之吉林吉塔

2019/11/11 职场文书

导游词之西江千户苗寨

2019/12/24 职场文书