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 相关文章推荐
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
微信小程序选择图片控件
Jan 19 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的基本常识小结
2013/07/05 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
img的onload的另类用法
2008/01/10 Javascript
js输出列表实现代码
2010/09/12 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
python实现下载文件的三种方法
2017/02/09 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
详解python metaclass(元类)
2020/08/13 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
舞蹈专业求职信
2014/06/13 职场文书
三峡导游词
2015/01/31 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL