全选 反选的Script实现
- 格式：wps
- 大小：14.50 KB
- 文档页数：2
下载文档原格式
合集下载
vue实现简单全选和反选功能
vue实现简单全选和反选功能本⽂实例为⼤家分享了vue实现简单全选和反选的具体代码，供⼤家参考，具体内容如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 700px;text-align: center;}tr,th {height: 40px;}</style><script src="../vue.js"></script></head><body><div class="box"><table cellspacing='0' border="solid 1px"><thead><tr><th>全选<input type="checkbox" v-model='isAllChecked'></th><th>id</th><th>商品名称</th><th>商品价格</th><th>商品数量</th></tr></thead><tbody><tr v-for='item in goods'><td><input type="checkbox" v-model='item.isCheck'></td><td>{{item.id}}</td><td>{{}}</td><td>{{item.price}}</td><td>{{item.num}}</td></tr></tbody></table></div><script>var vm = new Vue({el: '.box',methods: {},data: {goods: [{id: 20200905,name: '苹果',price: 3,num: 12,isCheck: false,},{id: 20200905,name: '⾹蕉',price: 2,num: 33,isCheck: false,},{id: 20200905,name: '橘⼦',price: 4,num: 44,isCheck: false,},]},computed: {isAllChecked: {/*this.goods.every(el=>el.isCheck)返回结果为true 或者false遍历下⽅每⼀个isCheck的状态、1、都选中返回true---------即全选为true,2、有⼀个没选中返回false---即全选为false*/get() {return this.goods.every(el => el.isCheck)},set(val) {// 全选的状态true、false两种状态console.log(val);// val为true即全选的时候、下⽅每⼀个isCheck也是true// val为false即全选的时候、下⽅每⼀个isCheck也是falsereturn this.goods.forEach(el => el.isCheck = val);}}}})</script></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
js实现复选框的全选与反选
js实现复选框的全选与反选a.单击列头复选框全选或全不选子项b.只要有一个子项没有选中，则取消列头的选中状态c.当所有子项目选中时，列头复选框自动置为选中状态d.将子项的复选框反过来选代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title>全选与反选</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="javascript">// --列头全选框被单击---function ChkAllClick(sonName, cbAllId){var arrSon = document.getElementsByName(sonName);var cbAll = document.getElementById(cbAllId);var tempState=cbAll.checked;for(i=0;i<arrSon.length;i++) {if(arrSon[i].checked!=tempState)arrSon[i].click();}}// --子项复选框被单击---function ChkSonClick(sonName, cbAllId) {var arrSon = document.getElementsByName(sonName);var cbAll = document.getElementById(cbAllId);for(var i=0; i<arrSon.length; i++) {if(!arrSon[i].checked) {cbAll.checked = false;return;}}cbAll.checked = true;}// --反选被单击---function ChkOppClick(sonName){var arrSon = document.getElementsByName(sonName);for(i=0;i<arrSon.length;i++) {arrSon[i].click();}}</script></head><body><form name="form1" method="post" action=""><table width="500" border="1"><tr bgcolor="#FFFF66"><td><INPUT name="chkAll" id="chkAll" title="全选"onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选</td> <td align="center">复选框全选示例</td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon1" type="checkbox" value='1' onclick="ChkSonClick('chkSon','chkAll')" />1</td><td> 作用：</td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon2" type="checkbox" value='2' onclick="ChkSonClick('chkSon','chkAll')" />2</td><td> a.单击列头复选框全选或全不选子项</td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon3" type="checkbox" value='3' onclick="ChkSonClick('chkSon','chkAll')" />3</td><td> b.只要有一个子项没有选中，则取消列头的选中状态</td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon4" type="checkbox" value='4' onclick="ChkSonClick('chkSon','chkAll')" />4</td><td> c.当所有子项目选中时，列头复选框自动置为选中状态</td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon5" type="checkbox" value='5'onclick="ChkSonClick('chkSon','chkAll')" />5</td><td> </td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon6" type="checkbox" value='6' onclick="ChkSonClick('chkSon','chkAll')" />6</td><td> </td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon7" type="checkbox" value='7' onclick="ChkSonClick('chkSon','chkAll')" />7</td><td> </td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon8" type="checkbox" value='8' onclick="ChkSonClick('chkSon','chkAll')" />8</td><td> </td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon9" type="checkbox" value='9' onclick="ChkSonClick('chkSon','chkAll')" />9</td><td> </td><td> </td><td> </td></tr><tr><td><INPUT name="chkSon" id="chkSon10" type="checkbox" value='10' onclick="ChkSonClick('chkSon','chkAll')" />10</td><td>d.将复选框反过来选</td><td> </td><td> </td></tr><tr bgcolor="#66FFFF"><td><INPUT name="chkOpposite" id="chkOpposite" title="反选"onClick="ChkOppClick('chkSon')" type="checkbox" />反选</td><td align="center">反选示例</td><td> </td> <td> </td> </tr></table></form></body></html>。
复选框的全选反选实现（即购物车的复选框实现）
复选框的全选反选实现（即购物车的复选框实现）html页⾯1. <!doctype html>2. <html lang="en">3. <head>4. <meta charset="UTF-8">5. <title>测试页⾯</title>6. <script src = "jquery.js"></script>7. <script src = "test.js"></script>8. </head>9. <body>10. <input type = "checkbox" id = "allCheck"/>全选</th><br/>11. <input type = "checkbox" name = "check"/></th>12. <input type = "checkbox" name = "check"/></th>13. <input type = "checkbox" name = "check"/></th>14. <input type = "checkbox" name = "check"/></th>15. </body>16. </html>js代码第⼀种⽅式 (有点不靠谱)1. //全选框2. $("#allCheck").click(function(){3. //console.log($(this).get(0).checked);console.log($(this).is(":checked"));//看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false//console.log($(this).attr('checked'));if($(this).is(":checked")){ if($(this).attr("checked")){4. $("input[name='check']").attr("checked",true);5. }else{6. $("input[name='check']").attr("checked",false);7. }8. })9. //单选框10. $("input[name='check']").change(function(){11. if($("input[name='check']").not("input:checked").size() <= 0){12. $("#allCheck").attr("checked",true);13. }else{14. $("#allCheck").attr("checked",false);15. }16. })第⼆种⽅式1. 全选框2. $("#allCheck").click(function(){3. $("input[name='check']").prop("checked",this.checked);4. })5. //单选框6. $("input[name='check']").change(function(){7. if($("input[name='check']").not("input:checked").size() <= 0){8. $("#allCheck").prop("checked",true);9. }else{10. $("#allCheck").prop("checked",false);11. }12. })第三种⽅式（原⽣js）1. //全选框2. $("#allCheck").click(function(){3. var a = document.getElementById("allCheck");4. var b = document.getElementsByName("check");5. if(a.checked){6. for(var i = 0; i < b.length; i++){7. b[i].checked = true;8. }9. }else{10. for(var i = 0; i < b.length; i++){11. b[i].checked = false;12. }13. }14. })15. //单选框16. $("input[name='check']").click(function(){17. var flag = true;18. var a = document.getElementById("allCheck");19. var b = document.getElementsByName("check");20. for(var i = 0; i < b.length; i++){21. if(!b[i].checked){22. flag = false;23. break;24. }25. }26. a.checked = flag;27. });。
JS实现的全选、全不选及反选功能【案例】
JS实现的全选、全不选及反选功能【案例】本⽂实例讲述了JS实现的全选、全不选及反选功能。
分享给⼤家供⼤家参考，具体如下：效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中.html结构代码:<input class = 'check' type="checkbox" ><input class = 'check' type="checkbox"><input class = 'check' type="checkbox"><input class = 'check' type="checkbox"><input class = 'check' type="checkbox"><input id="checkAll" type="button" value="全选"><input id="unCheckAll" type="button" value="全不"><input id="reverseCheck" type="button" value="反选">javascript代码如下:<script>/*⼀：需求分析：(1)点击全选：选中所有选择框（设置checked属性为true）(2)点击全不选：不选中所有选择框（设置checked属性为false）(3)点击反选：让每⼀个选择框的checked属性与⾃⾝相反⼆：思路分析1.获取元素2.注册事件3.事件处理*///1.获取页⾯元素var checkAll = document.getElementById('checkAll');//全选var unCheckAll = document.getElementById('unCheckAll');//全不选var reverseCheck = document.getElementById('reverseCheck');//反选var checkList = document.getElementsByClassName('check');//选择框列表//2.注册事件//2.1 全选checkAll.onclick = function(){//3.事件处理：选中所有选择框（设置checked属性为true）for(var i = 0;i<checkList.length;i++){checkList[i].checked = true;}}//2.2 全不选unCheckAll.onclick = function(){//3.事件处理:不选中所有选择框（设置checked属性为false）for(var i = 0;i<checkList.length;i++){checkList[i].checked = false;}}//2.3 反选reverseCheck.onclick = function(){//3.事件处理:让每⼀个选择框的checked属性与⾃⾝相反for(var i = 0;i<checkList.length;i++){checkList[i].checked = !checkList[i].checked;//逻辑⾮取反// if (checkList[i].checked == true){// checkList[i].checked = false;// }else{//false// checkList[i].checked = true;// }}}</script>完整⽰例代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> JS全选、全不选、反选</title></head><body><input class = 'check' type="checkbox" ><input class = 'check' type="checkbox"><input class = 'check' type="checkbox"><input class = 'check' type="checkbox"><input class = 'check' type="checkbox"><input id="checkAll" type="button" value="全选"><input id="unCheckAll" type="button" value="全不"><input id="reverseCheck" type="button" value="反选"><script>/*⼀：需求分析：(1)点击全选：选中所有选择框（设置checked属性为true）(2)点击全不选：不选中所有选择框（设置checked属性为false）(3)点击反选：让每⼀个选择框的checked属性与⾃⾝相反⼆：思路分析1.获取元素2.注册事件3.事件处理*///1.获取页⾯元素var checkAll = document.getElementById('checkAll');//全选var unCheckAll = document.getElementById('unCheckAll');//全不选var reverseCheck = document.getElementById('reverseCheck');//反选var checkList = document.getElementsByClassName('check');//选择框列表//2.注册事件//2.1 全选checkAll.onclick = function(){//3.事件处理：选中所有选择框（设置checked属性为true）for(var i = 0;i<checkList.length;i++){checkList[i].checked = true;}}//2.2 全不选unCheckAll.onclick = function(){//3.事件处理:不选中所有选择框（设置checked属性为false）for(var i = 0;i<checkList.length;i++){checkList[i].checked = false;}}//2.3 反选reverseCheck.onclick = function(){//3.事件处理:让每⼀个选择框的checked属性与⾃⾝相反for(var i = 0;i<checkList.length;i++){checkList[i].checked = !checkList[i].checked;//逻辑⾮取反// if (checkList[i].checked == true){// checkList[i].checked = false;// }else{//false// checkList[i].checked = true;// }}}</script></body></html>更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。
js实现表单项的全选、反选以及删除操作
js实现表单项的全选、反选以及删除操作<html><head><title>test</title><script language="javascript">function ReSel(){for(i=0;i<document.form1.logs.length;i++){ //这⼀⽤法只对form表单有效document.form1.logs[i].checked = true; //如果是实现【全不选】的话，改成false即可}}function SeSel(){for(i=0;i<document.form1.logs.length;i++){if(document.form1.logs[i].checked) document.form1.logs[i].checked = false;else document.form1.logs[i].checked = true;}}function DelSel(){var nid = getCheckboxItem();if(nid==""){alert("请选择项⽬!\r\n");return ;}location.href = "member_activation.php?dopost=del&ids="+nid;}//获得选中⽂件的⽂件名function getCheckboxItem(){var allSel="";if(document.form1.logs.value) return document.form1.logs.value;for(i=0;i<document.form1.logs.length;i++){if(document.form1.logs[i].checked){if(allSel=="")allSel=document.form1.logs[i].value;elseallSel=allSel+"-"+document.form1.logs[i].value;}}return allSel;}</script></head><body><table><tr><td>列表</td></tr><tr><td>选择</td><td>id</td><td>名字</td></tr><form name="form1">{foreach name="list" key='key' item='val'}<tr><td><input name='logs' type='checkbox' value='{$val.id/}' /></td><td>{$val.id}</td><td>{$}</td></tr>{/foreach}</form><tr bgcolor="#ffffff"><td height="36" colspan="9"><a class="coolbg" onClick="ReSel();">全选</a><a class="coolbg" onClick="SeSel();">反选</a><a class="coolbg" onClick="DelSel();">删除</a></td></tr></table></body></html>。
JavaScript--全选与反选
JavaScript--全选与反选在学习js中发现全选与反选也有很多种：例如：⼀. 按钮版全选与多选1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Title</title>6 </head>7 <body>8 <button>全选</button>9 <button>反选</button>10 <button>取消选择</button>11 <button>提交</button>12 <input type="checkbox" name="cbox[]" value="你"/>13 <input type="checkbox" name="cbox[]" value="是"/>14 <input type="checkbox" name="cbox[]" value="猪"/>15 <input type="checkbox" name="cbox[]" value="⼋"/>16 <input type="checkbox" name="cbox[]" value="戒"/>17 <input type="checkbox" name="cbox[]" value="⼆"/>18 <input type="checkbox" name="cbox[]" value="⼤"/>19 </body>20 </html>21 <script>22 "use strict";23var btns = document.getElementsByTagName('button');24var inps = document.getElementsByTagName('input');25// 是否选择26var flag;27// 全选28 btns[0].onclick = function () {29 selectAll(true);30 }3132// 反选33 btns[1].onclick = function () {34for(var i = 0; i < inps.length ; i++ ) {35 inps[i].checked = !inps[i].checked;36 }37 }3839// 取消选择40 btns[2].onclick = function () {41 selectAll(false);42 }4344// 提交45 btns[3].onclick = function () {46var str = "";47for(var i = 0; i < inps.length ; i++ ) {48if (inps[i].checked) {49 console.log(inps[i].value);50 str = str + inps[i].value;51 }52 }53 alert(str);54 }5556// 全选与取消选择公共⽅法57function selectAll(flag) {58for(var i = 0; i < inps.length ; i++ ) {59 inps[i].checked = flag;60 }61 }62 </script>⼆.全选与反选多选框版本1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Title</title>6 </head>7 <body>8 <input type="checkbox" />全选 <input type="checkbox" />反选 <button id="clear">取消选择</button><br/>9 <input type="checkbox" /><br/>10 <input type="checkbox" /><br/>11 <input type="checkbox" /><br/>12 <input type="checkbox" /><br/>13 <input type="checkbox" /><br/>14 <input type="checkbox" /><br/>15 <input type="checkbox" /><br/>16 <input type="checkbox" /><br/>17 <input type="checkbox" /><br/>18 <input type="checkbox" /><br/>19 <input type="checkbox" /><br/>20 </body>21 </html>22 <script>23/*24 *功能描述：全选：全部多选框处于选择状态,全选不处于选择：多选框处于不选择状态25 * 反选；未选择的变换成功选择状态，选择状态的变为未选择状态26 * 取消选择：所有选择状态的多选框都变成未选择状态27 * 如果下⾯的多选框全部选中，全选的checkbox就会⾃动选中28 * */2930// 获取多选框31var inps = document.getElementsByTagName('input');32var btn = document.getElementById('clear');33var checkTrue =0; // 记录处于选择状态的多选个数34// 全选35 inps[0].onclick = function () {36if (inps[0].checked) {37 inps[1].checked = false ; // 排他38for(var i = 0 ; i < inps.length; i++ ) {39if (i != 0 && i !=1) { //排除全选与反选功能选择框40 inps[i].checked = true;41 }42 }43 checkTrue = inps.length - 2 ;44 }else{45for(var i = 0 ; i < inps.length; i++ ) {46if (i !=1 && i!=0) { //排除全选与反选功能选择框47 inps[i].checked = !inps[i].checked;48 }49 }50 checkTrue = 0 ;51 }5253 }54// 反选55 inps[1].onclick = function () {56 inps[0].checked = false ;57for(var i = 0 ; i < inps.length; i++ ) {58if (i !=1 && i!=0) { //排除全选与反选功能选择框59 inps[i].checked = !inps[i].checked;60 }61 }62 checkTrue = inps.length - 2 - checkTrue ;63 }6465// 取消选择66 btn.onclick = function () {67for(var i = 0 ; i < inps.length; i++ ) {68 inps[i].checked = false;69 }70 checkTrue = 0 ;71 }7273// 当全选框没选择中的时候，下⾯多选框出现全部选择状态，全选框⾃动选中74for(var i = 0 ; i < inps.length; i++) {75//排除全选与反选功能选择框,并且记录选择状态76if (i !=1 && i!=0 ) {77 inps[i].onclick = function () {78if(this.checked) {79 ++checkTrue == inps.length-2?inps[0].checked = true:checkTrue;80 }else{81 --checkTrue > 0 ? checkTrue : checkTrue = 0;82 }83 console.log(checkTrue);84// 多选框出现全部选择状态，全选框⾃动选中85if(checkTrue == inps.length - 2) {86 inps[0].checked = true;87 }else{ // 多选框出现⼀个以上没有在选择状态，全选框⾃动不选中88 inps[0].checked = false;89 }90 }9192 }939495 }969798 </script>难点: 多选框版本的全选与反选，主要要注意全选状态中下⾯多选框的选中状态，如果有⼀个以上的多选框不在选中状态就要把全选状态去除，反之，多选框都在选中状态，那么全选框就是要在选中状态。
Javascript全选，反选，全不选的实现代码
Javascript全选，反选，全不选的实现代码使⽤js实现全选、反选、全不选。
代码如下：<html><head><script type="text/javascript">function checkEvent(name,allCheckId){var allCk=document.getElementById(allCheckId);if(allCk.checked==true)checkAll(name);elsecheckAllNo(name);}//全选function checkAll(name){var names=document.getElementsByName(name);var len=names.length;if(len>0){var i=0;for(i=0;i<len;i++)names[i].checked=true;}}//全不选function checkAllNo(name){var names=document.getElementsByName(name);var len=names.length;if(len>0){var i=0;for(i=0;i<len;i++)names[i].checked=false;}}//反选function reserveCheck(name){var names=document.getElementsByName(name);var len=names.length;if(len>0){var i=0;for(i=0;i<len;i++){if(names[i].checked)names[i].checked=false;elsenames[i].checked=true;}}}</script></head><body><input type="checkbox" id="ckall" onclick="checkEvent('ckcontact','ckall')" />全选<input type="checkbox" id="ckReserve" onclick="reserveCheck('ckcontact','ckReserve')" />反选<br /><input type="checkbox" name="ckcontact" value="1" />篮球<br /><input type="checkbox" name="ckcontact" value="2" />旅游<br /><input type="checkbox" name="ckcontact" value="3" />读书<br /><input type="checkbox" name="ckcontact" value="4" />美⾷<br /><input type="checkbox" name="ckcontact" value="5" />睡觉</body> </html>。
JavaScript之全选反选取消，for循环闭包
JavaScript之全选反选取消，for循环闭包需求:table中要求点击红色单元格和点击checkbox的效果一样，最后一行点击就是全选、反选、取消选择的效果。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>table{width: 400px;height: 15px;background-color: palegreen;text-align: center;}.check{width: 20%;background-color: indianred;}input{display: inline-block;vertical-align:middle;}div{display: inline-block;width: 400px;}div input{display: inline-block;width: 20%;}.select{background-color: bisque;}</style></head><body><table border="1" cellpadding="0" cellspacing="0"><tr><td class="check"><input class="inputcheck" type="checkbox"></td><td>富贵竹</td><td>绿萝</td></tr><tr><td class="check"><input class="inputcheck" type="checkbox"></td><td>栀子花</td><td>月季</td></tr><tr><td class="check"><input class="inputcheck" type="checkbox"></td><td>金银花</td><td>菊花</td></tr><tr><td class="check check4"><input class="inputcheck" type="checkbox"></td><td>玫瑰</td><td>百合</td></tr><tr class="select"><td><input class="selectall" type="button" value="全选"> </td><td><input class="reserve" type="button" value="反选"> </td><td><input class="cancel" type="button" value="取消"> </td></tr></table><script>var ele= document.getElementsByTagName("input");var check= document.getElementsByClassName("check");var inputcheck= document.getElementsByClassName("inputcheck");var all = document.getElementsByClassName("selectall")[0];var reserve = document.getElementsByClassName("reserve")[0];var cancel = document.getElementsByClassName("cancel")[0];//for循环闭包for(var i=0;i<check.length;i ){var td = check[i];td.onclick = function () {var td = check[i];return function () {var input = td.getElementsByTagName("input")[0];if(input.checked){input.checked = false;}else {input.checked = true;}}}(i)}//for循环闭包for(var i=0;i<inputcheck.length;i ){ var input = inputcheck[i]; input.onclick = function () {var input = inputcheck[i];return function () {if(input.checked){input.checked = false;}else {input.checked = true;}}}(i)}//全选all.onclick=function () {for(var i=0;i<ele.length;i ){ele[i].checked=true;}}//反选reserve.onclick=function () { for(var i=0;i<ele.length;i ){ if(ele[i].checked){ele[i].checked=false;}else {ele[i].checked=true;}}}//取消cancel.onclick =function () { for(var i=0;i<ele.length;i ){ ele[i].checked=false;}}</script></body></html>来源：。
javaScript实现复选框全选反选事件详解
javaScript实现复选框全选反选事件详解本⽂实例为⼤家分享了javaScript实现复选框全选反选的具体代码，供⼤家参考，具体内容如下代码<html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title></title><script>window.onload=function(){var selAll=document.getElementById("selAll");var hobbys=document.getElementsByName("hobby");var fx=document.getElementById("fx");var myClick=document.getElementById("xz");function myClick(){alert("hello");}//全选事件selAll.onclick=function(){if(selAll.checked == true){for ( var i=0; i<hobbys.length; i++) {hobbys[i].checked=true;}}else{for ( var i=0; i<hobbys.length; i++) {hobbys[i].checked=false;}}}//反选事件fx.onclick=function(){for (var i=0; i<hobbys.length; i++) {var b=hobbys[i];if (b.checked == true) {b.checked=false}else{b.checked=true;}}}}</script></head><body><span onclick="myClick()" id="xz"><input type="checkbox" id="selAll"/>全选</span><button id="fx">反选</button></br><input type="checkbox" name="hobby" />⽻⽑球<input type="checkbox" name="hobby"/>绘画<input type="checkbox" name="hobby"/>唱歌<input type="checkbox" name="hobby"/>跳舞</body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
Vue简单实例购物车4-全选和反选功能
Vue简单实例购物车4-全选和反选功能1、查看代码发现选中全选是由 check 样式控制的，所以我们要添加⼀个变量来控制是否全选：<span :class="['checkbox-btn', 'item-check-btn', allCheck ? 'check' : '']"><script>export default {data() {return {allCheck: false, // 是否全选}},}</script>2、给全选添加点击事件：<a href="javascipt:;" @click="getAllChecked"><span :class="['checkbox-btn', 'item-check-btn', allCheck ? 'check' : '']"><script>export default {methods: {// 点击全选和反选getAllChecked() {let flag = !this.allCheck}}}</script>我们发现每个商品都选中了才会变为全选，反之有⼀个商品没有选中，则不是全选状态。
3、这⾥我们可以⽤计算属性来定义 allCheck ：// 计算属性computed: {allCheck() {// every 当数组中每⼀项都返回 true，整体才返回 true；有⼀项返回 false，整体就返回 falsereturn this.cartList.every(item => {return item.checked})}}注意：上⾯ data ⾥的 allCheck 变量记得注释掉，改⽤计算属性。
js实现checkbox全选和反选示例
js实现checkbox全选和反选示例在网页中，通常会使用到复选框（checkbox）来选择多个选项。
其中，全选和反选功能是常见的需求，通过JavaScript可以实现这两个功能。
本示例将通过一个列表展示checkbox的全选和反选功能的实现方法。
以下是完整的代码示例：```html<!DOCTYPE html><html><head><title>Checkbox全选和反选示例</title></head><body><h1>Checkbox全选和反选示例</h1><h3>选择你喜欢的水果:</h3><input type="checkbox" id="selectAll" onclick="selectAll(">全选/取消全选<br><input type="checkbox" name="fruit" value="apple">苹果<br><input type="checkbox" name="fruit" value="banana">香蕉<br><input type="checkbox" name="fruit" value="orange">橙子<br><input type="checkbox" name="fruit" value="grape">葡萄<br><input type="checkbox" name="fruit" value="watermelon">西瓜<br><input type="checkbox" name="fruit" value="cherry">樱桃<br> <button onclick="inverseSelect(">反选</button><script>//全选/取消全选function selectAlvar checkboxes = document.getElementsByName("fruit");var selectAllCheckbox = document.getElementById("selectAll");for (var i = 0; i < checkboxes.length; i++)checkboxes[i].checked = selectAllCheckbox.checked;}}//反选function inverseSelecvar checkboxes = document.getElementsByName("fruit");for (var i = 0; i < checkboxes.length; i++)checkboxes[i].checked = !checkboxes[i].checked;}}</script></body></html>```在上面的代码中，首先定义了一个全选复选框，id为"selectAll"，点击该复选框时调用`selectAll(`函数。
JavaScript实现全选和全不选操作
JavaScript实现全选和全不选操作本⽂实例为⼤家分享了JavaScript实现全选和全不选操作的具体代码，供⼤家参考，具体内容如下效果⽰例默认状态下：勾选全选时：任意取消勾选物品A/物品B/物品C时实现代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>全选</title><script>function myAll() {var all = document.getElementById("all");var oneList = document.getElementsByName("one");for(var i = 0; i < oneList.length; i++) {oneList[i].checked = all.checked;}}function myOne() {var all = document.getElementById("all");var oneList = document.getElementsByName("one");for(var i = 0; i < oneList.length; i++) {if(oneList[i].checked == false) {all.checked = false;return;}}all.checked = true;}</script></head><body><table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="180px"><tr><th>全选<input id="all" type="checkbox" onclick="myAll()" /></th><th>序号</th><th>名称</th><th>单价</th><th>数量</th><th>总计</th></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>1</td><td>物品A</td><td>￥55</td><td>1</td><td>￥55</td></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>2</td><td>物品B</td><td>￥70</td><td>1</td><td>￥70</td></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>3</td><td>物品C</td><td>￥66</td><td>1</td><td>￥66</td></tr></table></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
全选反选
if (form.elements[i].name == "checkbox") {
e = form.elements[i]
e.checked = (action == "selectAll") ? (form.selectAll.checked) : (!eript>
</head>
<body>
<input type="checkbox" id="ckall" onclick="checkEvent('ck','ckall')" />
if (form.elements[i].name == "checkbox") {
e = form.elements[i]
e.checked = (action == "selectAll") ? (form.selectAll.checked) : (!e.checked)
<br>
Item3
<input type="checkbox" name="checkbox" value="checkbox">
<br>
Item4
<input type="checkbox" name="checkbox" value="checkbox">
<br>
反 选
<input type="checkbox" name="invest" value="checkbox" onClick="selectIt()">
js（四）全选全不选和反选
js（四）全选全不选和反选思路：通过选择全选的选框的状态stuts 即true/false控制其他选框。
⾸先我们要通过.checked⽅法获取选框（全选/全不选）的值。
function all(){var stuts=document.getElementById("xuan").checked;console.log(stuts);}此时控制台会打印选中（true）和不选中（false）的值。
通过getElementsName获取名字相同的checke选框成⼀个集合，在通过遍历集合更改每个选框的状态值。
c[i].checked=stuts;反选就是让状态值相反即可c[i].checked=!c[i].checked;源码：1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Title</title>6 </head>7 <body>8 <input type="checkbox" name="c">1<br>9 <input type="checkbox" name="c">2<br>10 <input type="checkbox" name="c">3<br>11 <input type="checkbox" name="c">4<br>12 <input type="checkbox" name="c">5<br>13 <input type="checkbox" name="c">6<br>14 <input type="checkbox" name="c">7<br>15 <hr>1617 <input type="checkbox" id="xuan" onchange="a()">全选/全不选<br>18 <input type="button" id="fan" onclick="fan()" value="反选">1920 <script>21 function a() {22 var stuts=document.getElementById("xuan").checked;23 var c=document.getElementsByName("c");24for(var i=0;i<c.length;i++){25 c[i].checked=stuts;26 }27 }28 function fan() {29 var stuts=document.getElementById("fan");30 var c=document.getElementsByName("c");31for(var i=0;i<c.length;i++){32 c[i].checked=!c[i].checked;33 }34 }35 </script>36 </body>37 </html>。
javascript全选和反选_批量删除
<html ><head><title>DOM动态删除TABLE多行</title><script type="text/javascript">function $(objId){//objId为table的IDreturn document.getElementById(objId);}function del_tbl(tableId,ckeckName){//tblN为table的IDvar ck = document.getElementsByName(ckeckName);//CKN为checkbox的namevar tab = $(tableId);var rowIndex;for(var i=0;i<ck.length;i++){if(ck[i].checked){rowIndex = ck[i].parentNode.parentNode.sectionRowIndex;tab.deleteRow(rowIndex);i = -1;}}}//全选触发的函数function checkAll(form) {//length-2是因为复选框中有一个全选，还有一个反选for (var i = 0; i < form.elements.length - 2; i++) {form.elements[i].checked = true;}}//反选触发的函数function checkReverse(form) {//length-2是因为复选框中有一个全选，还有一个反选for(var i = 0; i < form.elements.length - 2; i++) {form.elements[i].checked = (form.elements[i].checked == true) ? false : true;//三元运算//或者form.elements[i].checked == true ? form.elements[i].checked = false : form.elements[i].checked = true;}}</script></head><body><form ><table border="1" id="list"><tr><td><input type="checkbox" name="del" /></td><td> 第一行</td><td>1</td></tr><tr><td><input type="checkbox" name="del"/></td><td>第二行</td><td>2</td></tr><tr><td><input type="checkbox" name="del"/></td><td>第三行</td><td>3</td></tr><tr><td><input type="checkbox" name="del"/></td><td>第四行</td><td>4</td></tr><tr><td><input type="checkbox" name="del"/></td><td>第五行</td><td>5</td></tr><tr><td colspan="3"><div align="center"><input type="button" value="全选" onclick="checkAll(this.form)" /><input type="button" value="反选" onclick="checkReverse(this.form)" /><input type="button" value="删除" onclick="del_tbl('list','del')"/></div></td></tr></table></form></body></html>。
使用js实现全选功能。（全选，全不选，反选）
使⽤js实现全选功能。
（全选，全不选，反选）作业210721提交代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>全选反选全不选</title></head><body><!-- 选择框 --><input type="Checkbox" name="box" onclick="selectAll()" value="1" />吃饭<br /><input type="Checkbox" name="box" onclick="selectAll()" value="2" />喝酒<br /><input type="Checkbox" name="box" onclick="selectAll()" value="3" />抽烟<br /><input type="Checkbox" name="box" onclick="selectAll()" value="4" />烫头<br /><input type="Checkbox" name="box" onclick="selectAll()" value="5" />打牌<br /><!-- 功能按钮 --><input id="All" type="button" value="全选" onclick="All"><input id="None" type="button" value="全不选" onclick="None"><input id="Fan" type="button" value="反选" onclick="Fan"><script type="text/javascript">var All = document.getElementById('All');var None = document.getElementById('None');var Fan = document.getElementById('Fan');var boxes = document.getElementsByName("box"); //获取页⾯的选择框//全选All.onclick = function() {for (var i = 0; i < boxes.length; i++) {boxes[i].checked = true;//checked属性取true}}// 全不选None.onclick = function() {for (var i = 0; i < boxes.length; i++) {boxes[i].checked = false;//checked属性取false}}//2反选Fan.onclick = function() {for (var i = 0; i < boxes.length; i++) {boxes[i].checked = !boxes[i].checked;//checked属性取反}}</script></body></html>。
使用Html+JavaScript实现复选框功能----全选反选
使⽤Html+JavaScript实现复选框功能----全选反选⼀、Html>body部分:<body><table border="1" width="60%"><tr><td><input type="checkbox" name="all"/>全选</td><td>复选框⽰例</td></tr><tr><td><input type="checkbox" class="num" name="num"/>1</td><td></td></tr><tr><td><input type="checkbox" class="num" name="num"/>2</td><td></td></tr><tr><td><input type="checkbox" class="num" name="num"/>3</td><td></td></tr><tr><td><input type="checkbox" class="num" name="num"/>4</td><td></td></tr><tr><td><input type="checkbox" class="num" name="num"/>5</td><td></td></tr><tr><td><input type="checkbox" class="num" name="num"/>6</td><td></td></tr><tr><td><input type="checkbox" name="reall"/>反选</td><td></td></tr></table></body>⼆、javascript部分:<script>var allDom = document.getElementsByName("all")[0]; //找到全选框var numDoms = document.getElementsByName("num"); //找到6个选项的数组var reallDom = document.getElementsByName("reall")[0]; //找到反选框allDom.onclick = function(){ //定义⼀个全选框的点击函数if(this.checked){ //判断全选框是否选中,如果返回值为true代表选中for(var i=0;i<numDoms.length;i++){ //使⽤for循环选中6个列表框numDoms[i].checked = true;}}else{ //如果返回值为false代表未选中for(var i=0;i<numDoms.length;i++){ //使⽤for循环取消6个列表框的选中状态numDoms[i].checked = false;}}}reallDom.onclick = function(){ //定义⼀个反选框的点击函数for(var i=0;i<numDoms.length;i++){ //使⽤for循环遍历数组if(!numDoms[i].checked){ //如果下标为i的列表框处于未选中状态时numDoms[i].checked = true; //选中}else{ //反之,如果下标为i的列表框处于选中状态时numDoms[i].checked = false; //取消选中allDom.checked = false; //全选框随之取消选中}}}//注:使⽤jQuery时需要在页⾯中引⼊jQuery----<script src="js/jquery-1.8.3.js" type="text/javascript"></script>$(function(){ //页⾯加载完成后执⾏事件$("[name=num]").click(function(){ //使⽤属性选择器选择6个列表框数组定义点击函数for(var i=0;i<numDoms.length;i++){ //for循环遍历数组if(!numDoms[i].checked){ //如果有任意的⼀个列表框未选中allDom.checked = false; //则取消选中全选框break;}else{ //反之allDom.checked = true; //选中全选框}}});});</script>尾声:听说以后很常⽤,留此随笔以便复习。