JavaScript实现复选框的全选/全不选和批量选择

实现数据的批量选择以及全选/全部选功能的效果如下所示：

代码如下：

<a class="btn btn-default" id="search_like" style="margin-right: 5px;">搜索</a>
<a class="btn btn-success" id="search_export" href="">新增</a>
<a class="btn btn-primary" id="batch_del" onclick="delAllProduct()">删除</a>
...
<table id="dataTableExample" class="table table-bordered table-striped table-hover display"><thead><tr><th style="text-align:center;width:4%;"><input type="checkbox" name="CheckAll" value="" id="CheckAll"/></th><th style="width:15%">景点名称</th><th style="width:12%">景点代码</th></tr></thead><tbody><foreach name="sce_list" item="v"><tr><td style="text-align:center;width:4%;"><input type="checkbox" name="Check[]" value="{$v.sce_id}" id="Check[]"/></td><td title="{$v.sce_name}">{$v.sce_name}</td><td style="width:12%">{$v.basic_code}</td>  </tr></foreach></tbody></table><script type="text/javascript">//全选/全不选$("#CheckAll").bind("click",function(){           $("input[name='Check[]']").prop("checked",this.checked);          });//批量删除function delAllProduct(){if(!confirm("确定要删除景点信息吗？")){return ;}var cks = $("input[name='Check[]']:checked");var str="";//拼接所有的idfor(var i=0;i<cks.length;i++){if(cks[i].checked){str+=cks[i].value+",";}}//去掉字符串末尾的‘&'str=str.substring(0, str.length-1);// var a = str.split('&');//分割成数组// console.log(str);return false;$.ajax({type:'post',url:"{:U('Tour/batch_del')}",dataType:"json",data:{sce_id:str},success:function(data){console.log(data);return false;if(data['status'] == 1){alert('删除成功！');location.href=data['url'];}else{alert('删除失败！');return false;}}});}</script>

批量删除-后台代码（ThinkPHP3.2.3）：

//批量删除
public function batch_del(){$check_all = I('sce_id');// var_dump($check_all);die;$Scenic = M('travel_scenic_info');$where = 'sce_id in('.$check_all.')';  $scenic_list = $Scenic->where($where)->delete();// var_dump($scenic_list);die;if($scenic_list){$data['status'] = 1;$data['url'] = U('Tour/tour_list');$this->ajaxReturn($data);}else{$data['status'] = 0;$this->ajaxReturn($data);}
}

JavaScript实现复选框的全选/全不选和批量选择相关推荐

复选框（checkbox）、多选框
1.需求分析可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分图示是一个列表加底部一段文字说明,列 ...
html5判断多选框是否选择的函数,复选框（checkbox）、多选框
1.需求分析可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分图示是一个列表加底部一段文字说明,列 ...
多选框向后台传值，多选框的回显，对多选框的各种操作
1.多选框的回显: js:$( function(){ var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为 ...
复选框 html 操作,HTML页面中复选框的操作方法
原标题:HTML页面中复选框的操作方法复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会见到复选的身影.接下来,是我之前写过的两个小demo,都是关于复选框的,希望会给大家带 ...
【PHPWord】如何解决PHPWord的输出checkbox复选框并设置checked已勾选
目录一.需求二.基于XML的实现方式三.兼容性强的实现方式三.总结一.需求对于生成Word文档来说,复选框的勾选状态和非勾选状态的展示是一个非常常见的问题. 需要用到复选框的文档大概有这几 ...
帆软复选框根据数据库值显示勾选效果
1.经过测试,帆软8.0,sql编辑框里面展示"勾选复选框"字体图标无法正常展示,不展示或者展示问号 2.解决办法步骤一.自定义字典前要修改fineReport的字符集参考:h ...
下拉列表与多选框以及GridView中的多选框的问题
小丫头的随笔... 页面设计中有一个下拉列表(DropDownList)和多选框列表(CheckBoxList)以及一个可以提供显示的表格(GridView).当选择下拉列表中具体的值时,进行对多选框 ...
el-checkbox多选框点击第一次不能勾选，第二次才会勾选
点击第一次的时候没有变化,仔细看只多选框的外边框有一点点变色,但是没有出现勾号,第二次点击的时候才会出现勾号. v-model绑定的值必须是布尔值!!! <el-checkbox v-model ...
html复选框控制元素禁用,如何勾选复选框时禁用HTML必需属性？
你的问题的工作示例: HTML: Same as account name fname lname age address city 的Javascript: $(document).ready(fu ...
checkbox复选框，如何让其勾选时触发一个事件，取消勾选时不触发
<input type="checkbox" οnclick="checkboxOnclick(this)" /><script>fun ...

JavaScript实现复选框的全选/全不选和批量选择

JavaScript实现复选框的全选/全不选和批量选择相关推荐

最新文章

热门文章