关键词:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>checkbox</title> 6 <style type="text/css"> 7 .main{ 8 width: 400px; 9 height: 400px; 10 margin: 20px auto; 11 } 12 li{ 13 list-style: none; 14 text-shadow: 5px 5px 3px rgba(53,56,41,0.5); 15 } 16 h3{ 17 text-align: center; 18 text-shadow: 5px 5px 3px rgba(53,56,41,0.5); 19 color: blue; 20 } 21 .boxs,.choice{ 22 position: relative; 23 left: 100px; 24 } 25 </style> 26 27 </head> 28 <body> 29 30 <div class=main> 31 <h3>赛季最佳球员候选</h3> 32 <div class="boxs"> 33 <ul> 34 <li><input type="checkbox"/>梅西</li> 35 <li><input type="checkbox"/>内马尔</li> 36 <li><input type="checkbox"/>苏亚雷斯</li> 37 <li><input type="checkbox"/>伊列斯塔</li> 38 <li><input type="checkbox"/>罗伯托</li> 39 <li><input type="checkbox"/>拉基蒂奇</li> 40 </ul> 41 </div> 42 <div class="choice"> 43 <button onclick="select(1)">全选</button> 44 <button onclick="select(2)">全不选</button> 45 <button onclick="select(3)">反选</button> 46 </div> 47 </div> 48 49 <script> 50 function select(num) 51 { 52 var items = document.getElementsByTagName('input') 53 for(var i=0; i<items.length; i++) 54 { 55 switch(num) 56 { 57 case 1:items[i].checked = true;break; 58 case 2:items[i].checked = false;break; 59 case 3:items[i].checked= !items[i].checked;break; 60 61 } 63 } 64 } 65 </script> 66 </body> 67 </html>
js如何实现对name是数组的复选框的全选和反选以及取消选择?form内容如下:
<formmethod="post"id="form1"name="form1"action=""><label><inputtype='checkbox'name='ptpt[1]'value='a1'/>a1</label><label><inputtype='checkbox'name='ptpt[3]'value='a3'/>a3</l... 查看详情
jquery实现复选框的全选反选和不选功能
<!doctypehtml><html><head><metacharset="utf-8"><title>jQuery实现复选框的全选、反选和不选功能</title><scripttype="text/javascript"src="jquery-1.11.3.min.js"></script& 查看详情
jquery版的全选,全不选和反选
<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <scriptsrc="js/jquery.js"type="text/javascript"charset="utf-8"></script> <title></title> </head& 查看详情
jquery实现全选和反选功能
jQuery操作复选框的选中和不选中状态非常简单,使用attr()来设置"checked"属性的值,true未选中,false为未选中,在整个全选、反选过程中注意处理全选复选框的选中状态,以及获取选中选项的值。<ulid="list"><li><label><... 查看详情
vue中的全选和反选
<template><div><inputtype=‘checkbox‘class=‘input-checkbox‘v-model=‘checked‘v-on:click=‘checkedAll‘>全选<templatev-for=‘checkbincheckboxData‘><inputtype=‘checkbox‘name=‘checkbo 查看详情
原生js实现全选和反选以及任意一个未被选中的效果
模仿一个百度音乐的全选和反选的的操作。html代码如下:<divclass="box"><ulid="lists"><li><inputtype="checkbox"value=""><span>我爱你中国</span></li><li><inputtype="checkbox"value=""& 查看详情
vue2.0在table中实现全选和反选
...sp; 其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写... 查看详情
angularjs全选功能实现
...要增加全选和反选功能,之前只做过JQ版的全选和反选。实现效果:1.点击全选checkbox可以切换全选和全部清空2.点击列表中的checkbox,当全部选中时全选选中3.在全选状态下点击列表中的checkbox将其置为非选中状态时全选checkbox也... 查看详情
delphi实现dbgrid全选和反选功能
Delphi实现Dbgrid全选和反选、清除全选的功能,不管是在Delphi下,还是在WEB开发中,这种功能都是很实用的,是进行数据批量操作的基础。本模块就是实现了为Delphi的DBGrid数据列表增加全选内容、清除全选的功能,很实用... 查看详情
jquery实现的全选反选和不选功能
...们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮。<ulid="list"><li><label><inputtype="checkbox"value="1">1.时间都去哪儿了</label></li><li><label><... 查看详情
jquery案例二:实现全选全不选和反选(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>全选和全不选以及反选</title><scriptsrc="../js/jquery-1.8.3.js"></script><script>$(function()//全选事件$(" 查看详情
多选框的全选和全不选(复制)
...们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮。<ulid="list"> 查看详情
多选框checkbox全选全不选和反选
在判断多选框中的某一个是否被选中时,我们可以用checked的属性选中了就返回true,没被选中就返回false;这是html代码:<formaction="#"><labelfor="hobby">爱好:</label><labelfor="hobby1"><inputtype="checkbox"name="hobby"id="hobby1 查看详情
vue实现单选、全选和反选
...框通过v-model绑定到一个计算属性(checkAll),这个属性必须实现了getter和setter方法,当model数组长度等于fruits长度,返回true,表示全选。改变checkbox的值时会触发setter方法,如果变为true,表示全选,如果变为false,表示全不选。反... 查看详情
实现全选和反选的效果代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>全选</title><style>#allinspan{display:inline-block;width:150px;margin-top:10px;font-size:18px;tex 查看详情
jquery实现复选框全选全不选反选问题解析
今天打算用jQuery实现一下复选框的全选、全不选和反选问题,刚开始用的是attr("checked",true/false)方法,发现只能在最开始实现一次全选,可以实现全不选,无法实现反选,总之调试了好久死活得不到想要的效果。最后发现,j... 查看详情
全选和反选
//--------------主布局文件----------------------------<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"   查看详情
jsreact全选和反选
onCheckAll=(data)=>{ varCheckBox=document.getElementsByName(data); for(leti=0;i<CheckBox.length;i++){if(CheckBox[i].checked==true){CheckBox[i].checked=false;}else{CheckBox[i].checked=true}}; } 查看详情