js实现复选框的全选全部选和反选

WhatTTEver      2022-02-10     636

关键词:

 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}}; } 查看详情