checkbox做全部选中,全部取消效果

批量选中、取消多个checkbox的用法很简单,这个功能也很常用。这里做个总结。

在HTML中的写法:

 1 <div id="ftpFileDownTr">
 2     <button onclick="getBatchValues();" value="获取批量选择的值"/>
 3 </div>
 4 <table>
 5         <tr id="ftpFileTitle">
 6             <th>
 7                 <input type="checkbox" onclick="checkAll(this.checked)"/>全部选中/全部取消
 8             </th>
 9             <th>文件名称</th>
10             <th>文件大小</th>
11             <th>文件进度</th>
12             <th>文件状态</th>
13             <th>操作</th>
14         </tr>
15         <tr>
16             <td>
17                 <input type="checkbox" name="checkOne" value="a"/>
18             </td>
19             <td>文件名a</td>
20             <td>100M</td>
21             <td>10%</td>
22             <td>状态1</td>
23             <td>操作1</td>
24         </tr>
25         <tr>
26             <td>
27                 <input type="checkbox" name="checkOne" value="b"/>
28             </td>
29             <td>文件名b</td>
30             <td>100M</td>
31             <td>10%</td>
32             <td>状态2</td>
33             <td>操作2</td>
34         </tr>
35         <tr>
36             <td>
37                 <input type="checkbox" name="checkOne" value="a"/>
38             </td>
39             <td>文件名c</td>
40             <td>100M</td>
41             <td>10%</td>
42             <td>状态3</td>
43             <td>操作3</td>
44         </tr>
45 </table>

checkbox批量选择、批量取消效果的js写法:

1 function checkAll(checked){//批量选择、批量取消
2     $(‘input[name="checkOne"]‘).attr("checked",checked);
3 }

获取批量选中的checkbox的值的方法:

 1 function getBatchValues(ctx){
 2     var checkedArr=$("input[name=‘checkOne‘]:checked");
 3     if (checkedArr.length == 0){
 4         alert("至少要选择一条数据");
 5         return false;
 6     }
 7     var valueStr="";//值以","为分隔符
 8     for(var i=0;i<checkedArr.length;i++){
 9         if(i==0){
10             valueStr+=$(checkedArr[i]).val();
11         }else{
12             valueStr+=","+$(checkedArr[i]).val();
13         }
14     }
15         alert(valueStr);
16 }

就这样。

时间: 2024-10-13 21:18:03

checkbox做全部选中,全部取消效果的相关文章

web前端html实例-点击相文字选中和取消选中checkbox复选框

checkbox复选框大家应该不会陌生,点击此元素可以实现选中或者取消效果. 下面介绍一种更为人性化的措施,点击指定相关内容即可以实现选中和取消选中效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" />

MFC CheckBox选中或取消选中

CheckBox控件选中或取消选中时: void CFlapLaneDlg::OnBnClickedAutoPolling() { // TODO: 在此添加控件通知处理程序代码 CButton* pBtn = (CButton*)GetDlgItem(IDC_AUTO_POLLING); int state = pBtn->GetCheck(); if (state == 1) // 选中 { } else // 取消选中 { } }

JQuery设置checkbox选中或取消等相关操作

$("[name='checkbox']").attr("checked",'true');//全选 $("[name='checkbox']").removeAttr("checked");//取消全选 $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 //获取选择的值 var str=""; $

checkbox点击选中,再点击取消,并显示在文本框中

function checkItem(e,itemId) { var item = document.getElementById(itemId); var $items = $(item); if (e.checked) { var checkval = $items.val(); var str = $("#txtFilePath").val() + checkval; $("#txtFilePath").val(str); } else { var a = &

Js实现表单中的checkbox对勾选中效果

<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; chaRset=gb2312" /> <title>JS实现单个图片选中美化框</title> <style type="text/css"> body,

选中和取消选中复选框实现背景变色和取消变色

选中和取消选中复选框实现背景变色和取消变色:为了提高表格这种新闻列表的人性化程度,当前有很多措施,最为常见是鼠标悬浮行变色或者隔行变色,本章介绍一下另一种形式,就是前面有一个复选框,选中和取消选中复选框能够实现对应行背景变色或者取消变色,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&

WPF DataGrid DataGridTemplateColumn 列头checkbox如何在代码中取消选择

0 登录进行投票 <DataGrid Name="DG">                <DataGrid.Columns>                    <DataGridTemplateColumn Width="70">                        <DataGridTemplateColumn.HeaderTemplate>                            &l

js 设置多个复选框选中和取消选中

// 设置选中 function setCheckboxClick(obj) { if(obj == null) { $.messager.alert('警告', "请选择要设置选中的项!",'warning'); } // alert(obj.value); var authorityId = obj.value; $.ajax({ type: 'post', url: 'getAuthorityByAuthorityId.action', data: {"authorit

JS 设置复选框的选中与取消选中

// 设置选中 function setCheckboxClick(obj) { if(obj == null) { $.messager.alert('警告', "请选择要设置选中的项!",'warning'); } // alert(obj.value); var authorityId = obj.value; $.ajax({ type: 'post', url: 'getAuthorityByAuthorityId.action', data: {"authorit