< 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 ' > $ (documento) .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 ("取消"); } // 方法二 //$('Input[Type=checkboxfont>).prop('Checked',$(this).prop('Checked '));}); /**** ---- 第一列 ---- ****/$ ('#checkl1'). On ('click', function () {// 方法一 if (this.checked == true) {$ ('#check11,#check21,#chech31,#chec K41,#chech51 '). prop (' checked ', true);} else {$ ('#check11,#check21,#check31,#check41,#check51 '). prop (' checked ', falso);} // 方法二如上});/**** ---- 第二列 ---- ****/$ ('#checkl2'). On ('click', function () {// 方法一 if (this.ecked == true) {$ ('#check12,#chech22,#check32,#c true Heck42,#check52 '). prop (' checked ', true);} else {$ ('#check12,#check22,#check32,#check42,#check52 '). prop (' checked ', falso);} // 方法二如上});/**** ---- 第三列 ---- ****/$ ('#checkl3'). On ('click', function () {// 方法一 if (this.ecked == true) {$ ('#chech13,#chech23,#check33,#c true Heck43,#check53 '). prop (' checked ', true);} else {$ ('#check13,#check23,#check33,#chech43,#chech53 '). prop (' checked ', falso);} // 方法二如上});/**** ---- 第四列 ---- ****/$ ('#checkl4'). On ('click', function () {// 方法一 if (this.ecked == true) {$ ('#check14,#chech24,#check34,#c true Heck44,#check54 '). prop (' checked ', true);} else {$ ('#check14,#check24,#check34,#chech44,#chech54 '). prop (' checked ', falso);} // 方法二如上});/**** ---- 第一行 ---- ****/$ ('#checkh1'). On ('click', function () {// 方法一 if (this.ecked == true) {$ ('#chech11,#chech12,#c Heck13,#check14 '). prop (' checked ', true);} else {$ ('#chech11,#check12,#check13,#check14 '). prop (' checked ', falso);} // 方法二如上});/**** ---- 第二行 ---- ****/$ ('#checkh2'). On ('click', function () {// 方法一 if (this.ecked == true) {$ ('#check21,#chech22,#c Heck23,#check24 '). prop (' checked ', true);} else {$ ('#chech21,#check22,#check23,#check24 '). prop (' checked ', falso);} // 方法二如上});/**** ---- 第三行 ---- ****/$ ('#checkh3'). On ('click', function () {// 方法一 if (this.ecked == true) {$ ('#chech31,#check32,#c Heck33,#check34 '). prop (' checked ', true);} else {$ ('#chech31,#chech32,#check33,#check34 '). prop (' checked ', falso);} // 方法二 方法二如上});/**** ---- 第四行 ---- ****/$ ('#checkh4'). On ('click', function () {// 方法一 if (this.ecked == true) {$ ('#chech41,#chech42,#c Heck43,#check44 '). prop (' checked ', true);} else {$ ('#chech41,#chech42,#check43,#chech44 '). prop (' checked ', falso);} // 方法二如上});/**** ---- 第五行 ---- ****/$ ('#checkh5'). On ('click', function () {// 方法一 if (this.ecked == true) {$ ('#check51,#chech52,#c Heck53,#check54 '). prop (' checked ', true);} else {$ ('#check51,#check52,#check53,#check54 '). prop (' checked ', falso);} // 方法二 方法二如上});}); </script> </head> <body> <body <top: <tr> <tr> <td> <input type = "checkBox" id = "check1"/> <etiqueta for = "check1"> 全选 </selel> </td> <td> <input type = "checkbox" id = "checkl1"/> <label a = "checkl1"> 第一列 </etlabe> </td " type = "checkBox" id = "checkl2"/> <etiqueta for = "checkl2"> 第二列 </label> </td> <td> <input type = "checkbox" id = "checkl3"/> <etiqueta 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 = "check1414"/> </td> </tr> <tr> <td> <input type = "checkBox" id = "checkh2"/> <etiqueta para = "checkh2"> 第二行 </selicet> <telt> 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> <tr> <tr> <tr> <TD> = "checkh3"/> <etiqueta for = "checkh3"> 第三行 </label> </td> <td> <input type = "checkbox" id = "check3131"/> </td> <td> <input type = "checkBox" id = "check32"/> </td> <td> <input type = "checkbox" id = "check33"/> <td> <tping> <tuting> <titing> <titing> <tuting> <tume> <tuting> <tuting> <tuting> <tuting> <tuting> <tuting> <tuting <titing <titing> <titing> <tuting <titing> <titing> <tutin> <tutin> <tuting> <tit> <titing <titin type = "checkBox" id = "check34"/> </td> </tr> <tr> <td> <input type = "checkBox" id = "checkh4"/> <etiqueta for = "checkh4"> 第四行 </selabel> </td> <td> <input type = "checkbox" id = "check41"/> </td> <td> <put type = "serofer" check42 "check42" check42 " /> </td> <td> <input type = "checkBox" id = "check43"/> </td> <td> <input type = "checkbox" id = "check4444"/> </td> </tr> <tr> <td> <input type = "checkbox" id = "checkh5"/> <etiqueta para = "checkh5"> 第五行 </selicetiz 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>效果图
以上所述是小编给大家介绍的 casilla de verificación 选中一个另一个 casilla de verificación 也会选中的实现代码的全部叙述 ， 希望对大家有所帮助 如果大家想了解更多内容敬请关注武林网！