checkbox 選中一個另一個checkbox也會選中的實現代碼

2019-11-20 09:31:49

字體：大中小

來源：轉載

供稿：網友

<!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>

效果圖