js实现checkbox的全选/取消

所有的操作都将使用jquery进行。

主要是为了实现指定内容的批量/单独删除操作。

先看一下页面的设计。

实现操作的主要地方是:

首先实现单击“标题”旁的checkbox实现所有条目的选择。

要点:jquery选择器

PHP代码如下:

将checkbox命名为“checkall”和“checklist”。届时,点击“checkall”时候

会通过选择器,将所有“checklist”选中,再进行“删除”。

实现全选/取消功能:

 1 $("#checkAll").click(function(){
 2 if(this.checked){
 3 $("input[name=‘checklist‘]").each(function(){
 4 this.checked=true;
 5 });
 6 }else{
 7 $("input[name=‘checklist‘]").each(function(){
 8 this.checked=false;
 9 });
10 }
11 }
12 );

  实现获取已选择的checkbox内容(点击“删除”)

1 $("#delSelected").click(function(){
2 vararrCheck=$("input[name=‘checklist‘]:checked");
3 vararrT=[];
4 $(arrCheck).each(function(){
5 arrT.push(this.id);
6 });
7 });

剩下的事情就是将获取到的信息通过ajax使用post发给指定action去处理了。

时间: 2024-08-08 06:14:01

js实现checkbox的全选/取消的相关文章

html checkbox 实现全选/取消全选

html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> <th><input type="checkbox" onclick="swapCheck()" /></th> <th>Month</th> <th>Savings</th> </tr

JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 全部选择全选被选择

</pre><pre name="code" class="javascript"><span style="font-size:18px;">//点击全选按钮的事件操作 function selectAll(){ var allcheckBoxs=document.getElementsByName("iTo"); var select=document.getElementsByName

asp.net中Repeater结合js实现checkbox的全选/全不选

前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value="" onclick="javascript:FormSelectAll('form1','cboxi','CheckAll',this);" /> //用于选择是否全选的复选框,用javascript函数"FormSelectAll('form1','

js实现checkbox的全选和全不选功能

html代码: <form name="form1" method="post" action="manage.php?act=sub"> <input type="checkbox" name="mm[]" value="<?=$row['0']?>" onClick="checkAll(this, 'mm')"> <!--

vue.js实现checkbox的全选和反选

摘要: 1.监听全选的值的变化,来改变checbox的数组值 2.监听选中checkbox的数组值的变化,当某一项checkbox有变化,判断是否checkbox的数值长度是否和列表数据的长度一致,来改变全选的值. 下面来一起看看是怎么实现的吧: 一.HTML <template> <table class="table table-bordered table-hover text-center" id="tabletList"> <

用JavaScript实现CheckBox的全选取消反选,及遮罩层中添加内容

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1 { 8 position: fixed; 9 top: 0; 10 right: 0; 11 left: 0; 12 bottom: 0; 13 background

js中checkbox的全选和反选的实现

<head> <meta charset="utf-8"/> <script type="text/javascript"> window.onload=function(){ document.getElementById("unall").onclick=function(){ var hobbys= document.getElementsByName("hobby"); for(va

纯js实现checkbox的全选、反选、全不选

分开:a. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="checkbox" id="check_all">全选 <inpu

使用vue.js实现checkbox的全选和多个的删除功能

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 <script> var proData = [{   "name": "j1ax" }, {   "name": "j2ax&