跨境电商信息服务平台有哪些,哪些行业适合做seo,王野天女,浙江城乡建设网站js/jQuery常见操作 之 jQuery操作复选框的常见问题 1. js/jQuery的其他一些常见基础操作2. 全选/全不选问题2.1 效果2.2 实现代码2.2.1 简单js实现2.2.2 jQuery实现2.2.2.1 注意语法#xff08;区别jQuery版本#xff09;2.2.2.2 完整代码实现 3. jQuery实现点击 行tr 实现ch… js/jQuery常见操作 之 jQuery操作复选框的常见问题 1. js/jQuery的其他一些常见基础操作2. 全选/全不选问题2.1 效果2.2 实现代码2.2.1 简单js实现2.2.2 jQuery实现2.2.2.1 注意语法区别jQuery版本2.2.2.2 完整代码实现 3. jQuery实现点击 行tr 实现checkBox选中 翻页勾选问题3.1 jQuery实现点击 行tr 获取td中checkBox的值3.1.1 方式13.1.2 方式2 3.2 jQuery实现点击 行tr 实现checkBox选中或取消3.2.1 点击 tr 时checkbox选中或取消3.2.2 点击 首行tr 时实现全选或全不选3.2.3 点击非首行tr时数据列表行全选或全不选自动切换 3.3 翻页勾选问题3.4 附上述操作tr的全代码 1. js/jQuery的其他一些常见基础操作 js/jQuery 的一些常用操作js/jQuery获取表单元素值 以及 清空元素值的各种实现方式——附测试例子拿来即能实现效果. 2. 全选/全不选问题 2.1 效果 如下 2.2 实现代码 2.2.1 简单js实现 如下!DOCTYPE html htmlheadmeta charsetutf-8title/title/headbodyform methodpost action您想饲养的狗狗有input typecheckbox idcheckAllOrNo/全选/全不选br /input typecheckbox nameitems value边牧/边牧input typecheckbox nameitems value柯基/柯基input typecheckbox nameitems value秋田犬/秋田犬input typecheckbox nameitems value金毛/金毛br /input typebutton idcheckAll value全选/input typebutton idcheckNoOne value全不选/input typebutton idfanxuan value反选/input typebutton idbtnAllOrNO value全选/全不选/input typebutton idcommit value提交//formscript typetext/javascript//1. 全选var all document.getElementById(checkAll);function funAll(){var box document.getElementsByName(items);for(var i 0;ibox.length;i){// alert(box[i].value);box[i].checked true;}}all.onclick funAll;//2.全不选var allNo document.getElementById(checkNoOne);function funAllNo(){var box document.getElementsByName(items);for(var i 0;ibox.length;i){box[i].checked false;}}allNo.onclick funAllNo;//3.反选(直接取反)var fan document.getElementById(fanxuan);fan.onclick function(){var box document.getElementsByName(items);for(var i 0;ibox.length;i){ // if(box[i].checked false){// box[i].checked true;// }else{// box[i].checked false;// }//可以将整个if else优化为如下box[i].checked !box[i].checked;//直接取反}}//4.全选/全不选----按钮操作var btn_check_all document.getElementById(btnAllOrNO);btn_check_all.onclick function(){var boxes document.getElementsByName(items);var flag false;//false-全不选 true-全选for(var i 0; iboxes.length; i){if(boxes[i].checked false){flag true;//只要存在没有选中的话就进行反选break;}}// alert(flag);if(flag){//执行全选函数funAll();}else{//执行全不选函数funAllNo();}}//5 全选/全不选——复选框操作//5.1 点击全选复选框var checkAllOrNo_2 document.getElementById(checkAllOrNo);//复选框全选/全不选checkAllOrNo_2.onclick function(){var box document.getElementsByName(items);for(var i 0; ibox.length; i){box[i].checked this.checked;//即选中状态与全选/全不选的复选框保持一致即可}}//5.2 点击各项目复选框var boxAll_2 document.getElementsByName(items);for(var i0;iboxAll_2.length;i){boxAll_2[i].onclick function(){checkAllOrNo_2.checked true;//点击任何一个复选框全选复选框都先设置为选中状态for(var i0; iboxAll_2.length; i){if(boxAll_2[i].checked false){//只要有没有选中全选复选框就设置未选中checkAllOrNo_2.checked false;break;}}}}//6.提交 获取选中的复选框var data document.getElementById(commit);data.onclick function(){var box document.getElementsByName(items);var commmitData ;for(var i 0; ibox.length; i){if(box[i].checked true ){commmitData box[i].value ,;}}var resultData commmitData.substring(0,commmitData.length-1);alert(resultData);}/script/body /html2.2.2 jQuery实现 2.2.2.1 注意语法区别jQuery版本 下面以全选为例如下 复杂写法//1. 全选---复杂点写法 var all document.getElementById(checkAll); function funAll(){// 1.1 循环处理$(input[nameitems]).each(function(){// 下面两种写法高低版本的jQuery均可以// $(this).attr(checked,true); this.checked true;// prop 适合高版本的jQuery//$(this).prop(checked,true);});// 1.2 直接根据name处理// $(input[nameitems]).attr(checked, true);// 注意prop 适合高版本的jQuery// $(input[nameitems]).prop(checked, true); } all.onclick funAll;优化写法$(#checkAll).click(function(){$(input[nameitems]).attr(checked, true); });再以全选/全不选为例非按钮的情况如下 点击 全选/全不选 ——复杂点逻辑//5.1.1 点击 全选/全不选 复选框---使用多层this $(#checkAllOrNo).click(function(){var parentFlag this.checked;$(input[nameitems]).each(function(){this.checked parentFlag;}); });点击 全选/全不选 ——简单点逻辑//5.1.2 点击 全选/全不选 复选框----使用s(:checked) $(#checkAllOrNo).click(function(){$(input[nameitems]).each(function(){this.checked $(#checkAllOrNo).is(:checked);}); });点击各项目//5.2 点击各项目复选框 $(input[nameitems]).each(function(){$(this).click(function(){// 点击任何一个复选框全选/不全选 复选框都先设置为选中状态$(#checkAllOrNo).attr(checked,true);// 然后再循环所有的复选框是否有未选中的$(input[nameitems]).each(function(){if(!this.checked){$(#checkAllOrNo).attr(checked,false);return;}});}); });关于jQuery版本的一些可以看下面的文章3.6中有介绍 js/jQuery 的一些常用操作js/jQuery获取表单元素值 以及 清空元素值的各种实现方式——附测试例子拿来即能实现效果. 2.2.2.2 完整代码实现 各情况代码如下!DOCTYPE html htmlheadmeta charsetutf-8title/title!-- script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/script --script srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.3.2/jquery.min.js/script/headbodyform methodpost action您想饲养的狗狗有input typecheckbox idcheckAllOrNo/全选/全不选br /input typecheckbox nameitems value边牧/边牧input typecheckbox nameitems value柯基/柯基input typecheckbox nameitems value秋田犬/秋田犬input typecheckbox nameitems value金毛/金毛br /input typebutton idcheckAll value全选/input typebutton idcheckNoOne value全不选/input typebutton idfanxuan value反选/input typebutton idbtnAllOrNO value全选/全不选/input typebutton idcommit value提交//formscript typetext/javascript//1. 全选---复杂点写法var all document.getElementById(checkAll);function funAll(){// 1.1 循环处理$(input[nameitems]).each(function(){// 下面两种写法高低版本的jQuery均可以// $(this).attr(checked,true); this.checked true;// prop 适合高版本的jQuery//$(this).prop(checked,true);});// 1.2 直接根据name处理// $(input[nameitems]).attr(checked, true);// 注意prop 适合高版本的jQuery// $(input[nameitems]).prop(checked, true); }// all.onclick funAll;// 1. 全选---简单点写法$(#checkAll).click(function(){$(input[nameitems]).attr(checked, true);});//2.全不选$(#checkNoOne).click(function(){$(input[nameitems]).attr(checked, false);});//3.反选(直接取反)$(#fanxuan).click(function(){$(input[nameitems]).each(function(){this.checked !(this.checked);//直接取反});});//4.全选/全不选----按钮操作$(#btnAllOrNO).click(function(){var selectedNum 0;//0-全不选 0-全选$(input[nameitems]:not(:checked)).each(function(){selectedNum ;//计算没有选中的项目个数});if(selectedNum 0){// 只要存在没有选中的话就进行全选$(input[nameitems]).attr(checked, true);}else{// 全不选$(input[nameitems]).attr(checked, false);}});//5 全选/全不选——复选框操作//5.1.1 点击 全选/全不选 复选框---使用多层this// $(#checkAllOrNo).click(function(){// var parentFlag this.checked;// $(input[nameitems]).each(function(){// this.checked parentFlag;// });// });//5.1.2 点击 全选/全不选 复选框----使用s(:checked)$(#checkAllOrNo).click(function(){$(input[nameitems]).each(function(){// 选中状态与 全选/全不选 的复选框保持一致即可this.checked $(#checkAllOrNo).is(:checked);});});//5.2 点击各项目复选框$(input[nameitems]).each(function(){$(this).click(function(){// 点击任何一个复选框全选/不全选 复选框都先设置为选中状态$(#checkAllOrNo).attr(checked,true);// 然后再循环所有的复选框是否有未选中的$(input[nameitems]).each(function(){if(!this.checked){$(#checkAllOrNo).attr(checked,false);return;}});});});//6.提交 获取选中的复选框// 6.1 拼接字符串写法$(#commit).click(function(){var commmitData ;$(input[nameitems]:checked).each(function(){commmitData $(this).val() ,;});var resultData commmitData.substring(0,commmitData.length-1);alert(resultData);});// 6.2 数组写法$(#commit).click(function(){var commmitData [];$(input[nameitems]:checked).each(function(){commmitData.push($(this).val());});alert(commmitData);});/script/body /html3. jQuery实现点击 行tr 实现checkBox选中 翻页勾选问题 3.1 jQuery实现点击 行tr 获取td中checkBox的值 3.1.1 方式1 实现代码如下// 1.1 点击tr获取tr中是checkbox的td的值----方式1 $(#dogs_data tr).each(function(){var current $(this);current.click(function(){var box $(this).find(:checkbox);console.log(box);console.log(box.val());}); });效果如下 3.1.2 方式2 实现代码如下// 1.2 点击tr获取tr中是checkbox的td的值----方式2 $(#dogs_data tr).each(function(){$(this).click(function(){var box this.firstElementChild.firstElementChild;//获取checkbox元素标签console.log(box);console.log(box.value);//因为是标签取值用.value}); });实现效果如下 3.2 jQuery实现点击 行tr 实现checkBox选中或取消 3.2.1 点击 tr 时checkbox选中或取消 实现代码如下$(#dogs_data tr).each(function(){$(this).click(function(){var box this.firstElementChild.firstElementChild;//获取checkbox元素标签box.checked !box.checked;// 直接取反}); });实现效果如下 3.2.2 点击 首行tr 时实现全选或全不选 实现代码如下// 2.2 点击首行tr时表头实现全选或全不选 $(#dogs_data tr:eq(0)).each(function(){$(this).click(function(){var box this.firstElementChild.firstElementChild;//获取checkbox元素标签box.checked !box.checked;// 直接取反$(input[namedogIds]).each(function(){this.checked box.checked;// 数据行的选中状态与首行的选中状态保持一致});}); });实现效果如下 3.2.3 点击非首行tr时数据列表行全选或全不选自动切换 实现代码如下// 2.3 点击非首行tr时数据列表行全选或全不选自动切换 $(#dogs_data tr:gt(0)).each(function(){$(this).click(function(){var box this.firstElementChild.firstElementChild;//获取checkbox元素标签box.checked !box.checked; // 数据行直接取反$(#checkAllOrNo).attr(checked,true);// 数行先设置选中// 然后循环数据行的checkbox如果有未选中的取消首行选中为了少循环次数直接从not(:checked)中循环$(input[namedogIds]:not(:checked)).each(function(){$(#checkAllOrNo).attr(checked,false);// 如果存在任意一个未选中直接取消选中return;});}); });效果如下不是视频不是很明显需要的还需自己测试 3.3 翻页勾选问题 如果想支持翻页勾选那就把每次勾选的缓存在页面中的一个输入框里然后勾选一个追加一个这个参考上面取值的方式直接拼接即可实现此处就不再多说了。 3.4 附上述操作tr的全代码 如下!DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/script --script srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.3.2/jquery.min.js/scriptstyletable {border-collapse: collapse;}table tr th,td{border: 1px solid;width: 60px;text-align: center;}thead tr:hover{background-color: rgb(255, 127, 127);}tbody tr:hover{background-color: aquamarine;}/style /head bodytable celllspacing0 iddogs_datatheadtrthinput typecheckbox idcheckAllOrNo //thth编号/thth姓名/thth年龄/th/tr/theadtbodytrtdinput typecheckbox namedogIds valueA1001//tdtdA1001/tdtd麦兜/tdtd3/td/trtrtdinput typecheckbox namedogIds valueA1002//tdtdA1002/tdtd贝塔/tdtd2/td/trtrtdinput typecheckbox namedogIds valueA1003//tdtdA1003/tdtd泡泡/tdtd6/td/tr/tbody/tablescript// 1.1 点击tr获取tr中是checkbox的td的值----方式1// $(#dogs_data tr).each(function(){// var current $(this);// current.click(function(){// var box $(this).find(:checkbox);// console.log(box);// console.log(box.val());// });// });// 1.2 点击tr获取tr中是checkbox的td的值----方式2// $(#dogs_data tr).each(function(){// $(this).click(function(){// var box this.firstElementChild.firstElementChild;//获取checkbox元素标签// console.log(box);// console.log(box.value);// 因为是标签取值用.value// });// });// 2.1 点击 行tr 实现checkBox选中或取消// $(#dogs_data tr).each(function(){// $(this).click(function(){// var box this.firstElementChild.firstElementChild;//获取checkbox元素标签// box.checked !box.checked;// 直接取反// });// });// 2.2 点击首行tr时表头实现全选或全不选$(#dogs_data tr:eq(0)).each(function(){$(this).click(function(){var box this.firstElementChild.firstElementChild;//获取checkbox元素标签box.checked !box.checked;// 直接取反$(input[namedogIds]).each(function(){this.checked box.checked;// 数据行的选中状态与首行的选中状态保持一致});});});// 2.3 点击非首行tr时数据列表行全选或全不选自动切换$(#dogs_data tr:gt(0)).each(function(){$(this).click(function(){var box this.firstElementChild.firstElementChild;//获取checkbox元素标签box.checked !box.checked; // 数据行直接取反$(#checkAllOrNo).attr(checked,true);// 数行先设置选中// 然后循环数据行的checkbox如果有未选中的取消首行选中为了少循环次数直接从not(:checked)中循环$(input[namedogIds]:not(:checked)).each(function(){$(#checkAllOrNo).attr(checked,false);// 如果存在任意一个未选中直接取消选中return;});});});/script /body /html