全选与全不选javaScript代码

合集下载

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

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程序设计有所帮助。

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实现表格全选功能效果展⽰：1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>标题</title>6 <script type="text/javascript">7 function selectAll(choiceBtn) {8 var arr = document.getElementsByName("choice")9 for(var i=0;i<arr.length;i++){10 arr[i].checked=choiceBtn.checked11 }12 }13 </script>14 </head>15 <body>16 <table border="1" width="800px" height="800px">17 <tr>18 <td>选择</td><td>⽤户名</td><td>邮箱</td><td>电话</td><td>性别</td><td>操作</td>19 </tr>20 <tr>21 <td><input type="checkbox" name="choice"></td><td>username</td><td>123@</td><td>123456</td><td>男</td><td>发邮件封号编辑</td>22 </tr>23 <tr>24 <td><input type="checkbox" name="choice"></td><td>username</td><td>123@</td><td>123456</td><td>男</td><td>发邮件封号编辑</td>25 </tr>26 <tr>27 <td><input type="checkbox" name="choice"></td><td>username</td><td>123@</td><td>123456</td><td>男</td><td>发邮件封号编辑</td>28 </tr>29 <tr>30 <td><input type="checkbox" name="choice"></td><td>username</td><td>123@</td><td>123456</td><td>男</td><td>发邮件封号编辑</td>31 </tr>32 <tr>33 <td><input type="checkbox" name="choice"></td><td>username</td><td>123@</td><td>123456</td><td>男</td><td>发邮件封号编辑</td>34 </tr>35 <tr>36 <td><input type="checkbox" name="choice"></td><td>username</td><td>123@</td><td>123456</td><td>男</td><td>发邮件封号编辑</td>37 </tr>38 <tr>39 <td><input type="checkbox" name="choice"></td><td>username</td><td>123@</td><td>123456</td><td>男</td><td>发邮件封号编辑</td>40 </tr>41 <tr>42 <td><input type="checkbox" name="choice"></td><td>username</td><td>123@</td><td>123456</td><td>男</td><td>发邮件封号编辑</td>43 </tr>44 <tr>45 <td><input type="checkbox" name="choice"></td><td>username</td><td>123@</td><td>123456</td><td>男</td><td>发邮件封号编辑</td>46 </tr>47 <tr>48 <td><input type="checkbox" name="choice"></td><td>username</td><td>123@</td><td>123456</td><td>男</td><td>发邮件封号编辑</td>49 </tr>50 <tr>51 <td><input type="checkbox" name="choice"></td><td>username</td><td>123@</td><td>123456</td><td>男</td><td>发邮件封号编辑</td>52 </tr>53 <tr>54 <td><input type="checkbox" name="choice"></td><td>username</td><td>123@</td><td>123456</td><td>男</td><td>发邮件封号编辑</td>55 </tr>56 <tr>57 <td><input type="checkbox" name="choice"></td><td>username</td><td>123@</td><td>123456</td><td>男</td><td>发邮件封号编辑</td>58 </tr>59 <tr>60 <td><input type="checkbox" onclick="selectAll(this)">全选</td>61 </tr>62 </table>63 </body>64 </html>。

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>来源：。

JS实现CheckBox复选框全选、不选或全不选功能

JS实现CheckBox复选框全选、不选或全不选功能CheckBox控件表明⼀个特定的状态（即选项）是选定 (on，值为1) 还是清除 (off，值为0)。

在应⽤程序中使⽤该控件为⽤户提供“True/False”或“yes/no”的选择。

因为 CheckBox 彼此独⽴⼯作，所以⽤户可以同时选择任意多个 CheckBox，进⾏选项组合。

CheckBox复选框JS实现全选、不选、全不选功能，很简单，具体内容如下思路：1、获取元素2、给全选不选反选添加点击事件3、⽤for循环checkbox4、把checkbox的checked设置为true即实现全选5、把checkbox的checked设置为false即实现不选6、通过if判断，如果checked为true选中状态的，就把checked设为false不选状态，如果checked为false不选状态的，就把checked设为true选中状态。

html代码：<input type="button" value="全选" id="sele"/><input type="button" value="不选" id="setinterval"/><input type="button" value="反选" id="clear"/><div id="checkboxs"><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /></div>js代码：<script>window.onload=function(){var sele=document.getElementById('sele');//获取全选var unsele=document.getElementById('setinterval');//获取不选var clear=document.getElementById('clear');//获取反选var checkbox=document.getElementById('checkboxs');//获取divvar checked=checkbox.getElementsByTagName('input');//获取div下的input//全选sele.onclick=function(){for(i=0;i<checked.length;i++){checked[i].checked=true}}//不选unsele.onclick=function(){for(i=0;i<checked.length;i++){checked[i].checked=false}}//反选clear.onclick=function(){for(i=0;i<checked.length;i++){if(checked[i].checked==true){checked[i].checked=false}else{checked[i].checked=true}}}}</script>以上所述就是本⽂的全部内容了，希望⼤家能够喜欢。

JS----checked----checked选中和未选中的获取

JS----checked----checked选中和未选中的获取全选、全不选、反选功能html代码<form action="" id="oForm" name="myForm"><input type="checkbox" name="hobby" id="basket" value="basket">篮球<Br><input type="checkbox" name="hobby" id="zuqiu" value="zuqiu" >⾜球<Br><input type="checkbox" name="hobby" id="paiqiu" value="paiqiu">排球<Br><input type="checkbox" name="hobby" id="wqiu" value="wqiu">⽹球<Br><input type="checkbox" name="hobby" id="biqiu" value="biqiu">壁球<Br><input type="checkbox" name="hobby" id="bpq" value="bpq">乒乓球<Br><input type="checkbox" name="hobby" id="ymq" value="ymq">⽻⽑球<Br><input type="button" name="all" id="all" value='全选' onclick="setVal(1)"><input type="button" name="allNo" id="allNo" value='全不选' onclick="setVal(0)"><input type="button" name="noCheck" id="noCheck" value='反选' onclick="setVal(-1)"></form>JS代码function setVal(iNum){var aForm = document.getElementById("myForm");var aArr = aForm.hobby;for(var i=0;i<aArr.length;i++){if( iNum<0 ){aArr[i].checked = !aArr[i].checked;}else{aArr[i].checked = iNum;}}}设置选中下边两种写法没有任何区别只是少了些代码⽽已<input id="cb1" type="checkbox" checked /><input id="cb2" type="checkbox" checked="checked" />jquery赋值checked的⼏种写法:所有的jquery版本都可以这样赋值:// $("#cb1").attr("checked","checked");// $("#cb1").attr("checked",true);jquery1.6+:prop的4种赋值:// $("#cb1").prop("checked",true);//很简单就不说了哦// $("#cb1").prop({checked:true}); //map键值对// $("#cb1").prop("checked",function(){return true;//函数返回true或false});//$("#cb1").prop("checked","checked");为什么input checkbox有 checked='checked'还是没选中如果⽤jQuery1.6+来写的话：建议使⽤$(element).prop('checked', true/false);⽽不是$(element).attr('checked', true/false);其实也就相当于要使⽤：element.checked = true/false;⽽并不是element.setAttribute('checked', true/false/'checked');jquery判断checked的三种⽅法.attr('checked'): //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false.prop('checked'): //16+:true/false.is(':checked'): //所有版本:true/false//别忘记冒号哦jQuery获取未选中的checkbox$('input[type=checkbox]').not("input:checked");jQuery获取选中的checkbox$('input[type=checkbox]:checked');jquery官⽹checked的⽤法/checked-selector/DataTable翻页checked部分代码内容太多需要勾选时，我们需要做翻页，但是翻页要记录之前的页⾯勾选了哪些，需要借助input来记录。

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>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

使用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>。

关于jquery的全选与全不选

关于使用jquery做全选的问题和理解在js文件中,常常会遇到列表需要全选或是全不选的情况,但是使用jquery时,常常会遇到一些异常情况,例如,点击全选后,列表中的其他选项没有出现预期的效果,及没有被全选中,通过查看页面html代码后发现, <input type=”checkbox” checked=”checked”>,及<input type=”checkbox”>标签的checked属性为”checked”,表示被选中,但是显示不出来,换了最新版本的jquery是同样的问题,如下图:在网上查找相关资料后,发现很都是copy这里的文章,copy那里的文章,到处都是一样,有没什么的用,发现有一处总结的很好,就是在做全选的时候,页面代码与页面显示不一致的情况,在这里我借鉴过来:内容如下:jquery与checkbox的checked属性的问题，讲的是控件<input type="checkbox"></input>1、页面加载成功后，点击选中或取消选中该checkbox，checkbox属性里的checked属性不会根据该checkbox是否选中而变化2、checkbox里的onchange或onclick方法里用jquery的attr方法获取checked是看得到的checked属性的值与它是否给钩上没有关系3、使用document.getElementById("checkbox_id").checked获取的值与是否钩上一至，即与所见即所得4、使用$("#checkbox_id").attr("checked")获取的值与<input type="checkbox"></input>里的checked情况一至，不是所见即所得5、使用$("#checkbox:checked")获取的都是被钩上的checkbox6、document.getElementById("checkbox_id").checked=true，控件里的checked属性没有显示出来，所做即所见7、$("#checkbox_id").attr("checked"，true)，控件里的checked属性显示出来，所做即所见，同时代码也会变化最后发现,必须使用基本的js语法才能搞定这个问题$("#selectall").bind("click",function(){//selectall为表示全选的框var f=document.getElementById("selectall").checked;var s=document.getElementsByName("deletelist");//deletelist表示没一个复选框if(f){//全选被选中for(var i=0;i<s.length;i+=1)//使每一个复选框都被选中s[i].checked="checked";}else{ //全不选for(var i=0;i<s.length;i+=1)//使每一个复选框都被不选中s[i].checked="";}});。

全选按钮代码

<html><head><script language="javascript">//选中全选按钮，下面的checkbox全部选中var selAllAll = document.getElementById("selAll"); function selectAll(){var obj = document.getElementsByName("checkAll"); if(document.getElementById("selAll").checked == false) {for(var i=0; i<obj.length; i++){obj[i].checked=false;}}else{for(var i=0; i<obj.length; i++){obj[i].checked=true;}}}//当选中所有的时候，全选按钮会勾上function setSelectAll(){var obj=document.getElementsByName("checkAll");var count = obj.length;var selectCount = 0;for(var i = 0; i < count; i++){if(obj[i].checked == true){selectCount++;}}if(count == selectCount){document.all.selAll.checked = true;}else{document.all.selAll.checked = false;}}//反选按钮function inverse() {var checkboxs=document.getElementsByName("checkAll");for (var i=0;i<checkboxs.length;i++) {var e=checkboxs[i];e.checked=!e.checked;setSelectAll();}}</script></head><body><center><input type="checkbox" id="selAll" onclick="selectAll();" />全选<input type="checkbox" id="inverse" onclick="inverse();" />反选<div id="allcheck"><input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>足球<br> <input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>篮球<br> <input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>跑步<br> <input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>登山<br> <input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>唱歌<br> <input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>跳舞<br> </div></center></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>尾声:听说以后很常⽤,留此随笔以便复习。

javascript实现checkbox全选的代码

}
使用方法①
复制代码代码如下:
<a href="" onclick="checkall('goods')">全选</a>
注意：'goods'是所有需要选中的checkbox的name
使用方法②
<a href="" id="checkAll">全选</a> <script> document.getElementById('checkAll').onclick = function () {
checkall('goods') }; </script>
注意：'goods'是所有需要选中的checkbox的name
以上2种方法就是本文给大家总结的全部内容了，希望大家能够喜欢，如有更好的方法，也请小伙伴们告之，本文持续更新。
这篇文章主要为大家详细介绍了js图片轮播插件的封装代码只需要获取到图片和按钮具有一定的参考价值感兴趣的小伙伴们可以参考一下
javascript实现 checkbox全kall(checkNames){ var allBoxs = document.getElementsByName(checkNames); for(var i = 0 ;i<allBoxs.length;i++){ if(allBoxs[i].type == 'checkbox'){ if(allBoxs[i].checked==false){ allBoxs[i].checked = true ; }else{ allBoxs[i].checked = false ; } } }

htmljs全选反选全不选源代码

htmljs全选反选全不选源代码<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>全选，反选按钮</title><script type="text/javascript">window.onload=function(){/**1 #checkedAllBtn* 2 #checkedBoBtn* 3 #checkedRevBtn* 4 #sendBtn* 5 #checkedAllBox* 6 #items* */var checkedAllBtn = document.getElementById("checkedAllBtn");//checkedAllBoxvar checkedAllBox = document.getElementById("checkedAllBox");checkedAllBtn.onclick = function(){//获取四个多选框itemsvar items = document.getElementsByName('items');//遍历itemsfor(var i=0;i<items.length;i++){//设置四个多选框变成选中状态//通过多选框的checked属性可获取或设置选中状态items[i].checked = true;}//将checkedAllBox设置为选中状态checkedAllBox.checked = true;};//全不选按钮var checkedNoBtn = document.getElementById("checkedNoBtn");checkedNoBtn.onclick = function(){//获取四个多选框itemsvar items = document.getElementsByName('items');//遍历itemsfor(var i=0;i<items.length;i++){//设置四个多选框变成选中状态//通过多选框的checked属性可获取或设置选中状态items[i].checked = false;}//将checkedAllBox设置为选中状态checkedAllBox.checked = false;};//反选也要判断是否都需要全部选中var checkedRevBtn = document.getElementById("checkedRevBtn");checkedRevBtn.onclick = function(){//获取四个多选框itemsvar items = document.getElementsByName('items');checkedAllBox.checked = true;//遍历itemsfor(var i=0;i<items.length;i++){//设置四个多选框变成选中状态//通过多选框的checked属性可获取或设置选中状态items[i].checked = !items[i].checked;if(!items[i].checked){//⼀旦进⼊判断，则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked = false;}}};//提交按钮var sendBtn = document.getElementById("sendBtn");sendBtn.onclick = function(){var items = document.getElementsByName('items');//遍历 itemsfor(var i=0; i<items.length;i++){//判断多选框是否选中if(items[i].checked){alert(items[i].value);}}};checkedAllBox.onclick = function(){var items = document.getElementsByName('items');//遍历itemsfor(var i=0;i<items.length;i++){//设置四个多选框变成选中状态items[i].checked = this.checked;}};//items//如果四个多选框全都选中，则checkedAllBox也应该选中//如果四个多选框都没选中，则checkedAllBox也应该没选中var items = document.getElementsByName('items');//为四个多选框分别绑定点击响应函数for(var i=0 ; i<items.length ; i++){items[i].onclick = function(){//将checkedAllBox设置为选中状态checkedAllBox.checked = true;for(var j=0 ; j<items.length ; j++){//判断四个多选框是否全选//只要有⼀个没选中则就不是全选if(!items[j].checked){//⼀旦进⼊判断，则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked = false;//⼀旦进⼊判断，则已经得出结果，不⽤再继续执⾏循环break;}}};}}</script></head><body><form method="post" action="">你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br /><input type="checkbox" name="items" value="⾜球" />⾜球<input type="checkbox" name="items" value="篮球" />篮球<input type="checkbox" name="items" value="⽻⽑球" />⽻⽑球<input type="checkbox" name="items" value="乒乓球" />乒乓球<br /><input type="button" id="checkedAllBtn" value="全　选" /><input type="button" id="checkedNoBtn" value="全不选" /><input type="button" id="checkedRevBtn" value="反　选" /><input type="button" id="sendBtn" value="提　交" /></form></body></html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>全选，反选按钮</title><script type="text/javascript">window.onload=function(){/**1 #checkedAllBtn* 2 #checkedBoBtn* 3 #checkedRevBtn* 4 #sendBtn* 5 #checkedAllBox* 6 #items* */var checkedAllBtn = document.getElementById("checkedAllBtn");//checkedAllBoxvar checkedAllBox = document.getElementById("checkedAllBox");checkedAllBtn.onclick = function(){//获取四个多选框itemsvar items = document.getElementsByName('items');//遍历itemsfor(var i=0;i<items.length;i++){//设置四个多选框变成选中状态//通过多选框的checked属性可获取或设置选中状态items[i].checked = true;}//将checkedAllBox设置为选中状态checkedAllBox.checked = true;};//全不选按钮var checkedNoBtn = document.getElementById("checkedNoBtn");checkedNoBtn.onclick = function(){//获取四个多选框itemsvar items = document.getElementsByName('items');//遍历itemsfor(var i=0;i<items.length;i++){//设置四个多选框变成选中状态//通过多选框的checked属性可获取或设置选中状态items[i].checked = false;}//将checkedAllBox设置为选中状态checkedAllBox.checked = false;};//反选也要判断是否都需要全部选中var checkedRevBtn = document.getElementById("checkedRevBtn"); checkedRevBtn.onclick = function(){//获取四个多选框itemsvar items = document.getElementsByName('items');checkedAllBox.checked = true;//遍历itemsfor(var i=0;i<items.length;i++){//设置四个多选框变成选中状态//通过多选框的checked属性可获取或设置选中状态items[i].checked = !items[i].checked;if(!items[i].checked){//⼀旦进⼊判断，则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked = false;}}};//提交按钮var sendBtn = document.getElementById("sendBtn");sendBtn.onclick = function(){var items = document.getElementsByName('items');//遍历 itemsfor(var i=0; i<items.length;i++){//判断多选框是否选中if(items[i].checked){alert(items[i].value);}}};checkedAllBox.onclick = function(){var items = document.getElementsByName('items');//遍历itemsfor(var i=0;i<items.length;i++){//设置四个多选框变成选中状态items[i].checked = this.checked;}};//items//如果四个多选框全都选中，则checkedAllBox也应该选中//如果四个多选框都没选中，则checkedAllBox也应该没选中var items = document.getElementsByName('items');//为四个多选框分别绑定点击响应函数for(var i=0 ; i<items.length ; i++){items[i].onclick = function(){//将checkedAllBox设置为选中状态checkedAllBox.checked = true;for(var j=0 ; j<items.length ; j++){//判断四个多选框是否全选//只要有⼀个没选中则就不是全选if(!items[j].checked){//⼀旦进⼊判断，则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked = false;//⼀旦进⼊判断，则已经得出结果，不⽤再继续执⾏循环break;}}};}}</script></head><body><form method="post" action="">你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br /><input type="checkbox" name="items" value="⾜球" />⾜球<input type="checkbox" name="items" value="篮球" />篮球<input type="checkbox" name="items" value="⽻⽑球" />⽻⽑球<input type="checkbox" name="items" value="乒乓球" />乒乓球<br /><input type="button" id="checkedAllBtn" value="全　选" /><input type="button" id="checkedNoBtn" value="全不选" /><input type="button" id="checkedRevBtn" value="反　选" /><input type="button" id="sendBtn" value="提　交" /></form></body></html>。

比较全的JScheckbox全选、取消全选、删除功能代码

⽐较全的JScheckbox全选、取消全选、删除功能代码看下⾯两种实现⽅法：复制代码代码如下:function checkAll(){var code_Values = document.all['code_Value'];if(code_Values.length){for(var i=0;i<code_Values.length;i++){code_Values[i].checked = true;}}else{code_Values.checked = true;}}function uncheckAll(){var code_Values = document.all['code_Value'];if(code_Values.length){for(var i=0;i<code_Values.length;i++){code_Values[i].checked = false;}}else{code_Values.checked = false;}}function multipleDelete(){var num = 0;var code_Values = document.all['code_Value'];if(code_Values.length){for(var i=0;i<code_Values.length;i++){if(code_Values[i].checked == true){num ++;}}}else{if(code_Values.checked == true){num ++ ;}}if(num == 0){alert('Please select delete item');}if(num >0){document.BuCodeSearch.action = '<%=EusUtil.getPage("lookup.generic.bucode.delete.s")%>';document.BuCodeSearch.submit();}}</script>复制代码代码如下:function checkAll(){var code_Values = document.getElementsByTagName("input");for(i = 0;i < code_Values.length;i++){if(code_Values[i].type == "checkbox"){code_Values[i].checked = true;}}}function uncheckAll(){var code_Values = document.getElementsByTagName("input");for(i = 0;i < code_Values.length;i++){if(code_Values[i].type == "checkbox"){code_Values[i].checked = false;}}}function multipleDelete(){if (document.BuCodeSearch.elements["code_Value"]){var num = 0;var fm = document.BuCodeSearch;if (document.BuCodeSearch.elements["code_Value"]){var elm = document.BuCodeSearch.elements["code_Value"];var ename = "code_Value";if (elm.length) {var len = fm.elements[ename].length;for (var i = 0; i< len; i++) {var e = fm.elements[ename][i];if (e.checked == true){num++;}}} else {if (elm.checked == true ) {num++;}}if (num > 0 ){document.BuCodeSearch.action = '<%=EusUtil.getPage("lookup.generic.bucode.delete.s")%>'; document.BuCodeSearch.submit();}}}}code_Value为checkbox表单的名称，BuCodeSearch为form名称复制代码代码如下:<td align="left" width="20"><input type="checkbox" name="code_Value" value="<%=userDefFieldValueBean.getUdfValue()%>"></td>。

JS实现全选功能

JS实现全选功能000. 开始学习JS有⼀段时间了，最近看了⼀些JS练⼿的⼩demo实例，⾃⼰也尝试着⽤JS进⾏实现。

全选功能是在很多注册页⾯、获取⽤户兴趣爱好、让⽤户勾选⼀些选项等页⾯中常见的⼀种效果，主要有全选/全不选，反选，重置，提交等⼏个功能。

现在我们就开⼀步⼀步的开始解析代码。

另外注意⼀下，这⾥⾯运⽤到了⼀些外部的CSS⽂件和JS⽂件，单纯的只复制下⾯的代码可能不会出现你想要的结果，请移步github地址获取完整源代码：001. HTML部分16<!DOCTYPE html>7<html lang="en">8<head>9<meta charset="UTF-8">10<title>全选功能练习(CheckAll)</title>11<link rel="stylesheet" href="style.css">12<link rel="stylesheet" type="text/css" href="../commonCSS.css">13<script src="checkAll.js"></script>14</head>15<body>16<header>17<p>全选功能</p>18</header>19<form id="myForm" action="#" method="post">20请选择您的兴趣爱好：21<input type="checkbox" id="checkOrCancelAll"><label for="checkOrCancelAll">全选/取消全选</label>2223<br><br>2425<input type="checkbox" name="item" id="football" value="⾜球"><label for="football">⾜球</label>26<input type="checkbox" name="item" id="running" value="跑步"><label for="running">跑步</label>27<input type="checkbox" name="item" id="swimming" value="游泳"><label for="swimming">游泳</label>28<input type="checkbox" name="item" id="reading" value="阅读"><label for="reading">阅读</label>29<input type="checkbox" name="item" id="coding" value="写代码"><label for="coding">写代码</label>3031<br><br>3233<input type="button" class="button" name="choice" id="checkAll" value="全选">34<input type="button" class="button" name="choice" id="invert" value="反选">35<input type="button" class="button" name="choice" id="reset" value="复位">36<input type="button" class="button" id="submit" value="提交">3738</form>39</body>40</html>View Code 在这个⼩demo中，第⼀次学习并运⽤了<label>标签，将该标签的for属性设置为对应的id属性值，可以在页⾯中点击⽂字也能选中对应的checkbox，若不设置便只能点击那个⼩⼩的⽅框才能选中checkbox。

DOM操作案例之--全选与反选

DOM操作案例之--全选与反选全选与反选在表单类的项⽬中还是很常见的，电商项⽬中的购物车⼀定少不了这个功能。

下⾯我只就⽤⼀个简单的案例做个演⽰吧。

<div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbAll"/></th><th>商品</th><th>价格</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox"/></td><td>⼩⽶⼿机</td><td>2000</td></tr><tr><td><input type="checkbox"/></td><td>ThinkPad</td><td>5000</td></tr><tr><td><input type="checkbox"/></td><td>iPhone7</td><td>5000</td></tr><tr><td><input type="checkbox"/></td><td>iPhoneX</td><td>9000</td></tr></tbody></table>上⾯是是HTML部分代码，做了⼀个表格。