`

checkbox 全选 /全不选

 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style-type:none;
}
#wrap{
width:150px;
margin:50px auto;
}
</style>
<title></title>
</head>
<body>
<div id="wrap">
<input type="button" id="selecte_all" value="全选"/>
<input type="button" id="selecte_no" value="全不选"/>
<input type="button" id="selecte_etr" value="反选"/>
<ul>
<li><input type="checkbox" class="about" />资料</li>
<li><input type="checkbox" class="about" />简历</li>
<li><input type="checkbox" class="about" />经历</li>
<li><input type="checkbox" class="about" />爱好</li>
<li><input type="checkbox" class="about" />其他</li>
</ul>
</div>
<script type="text/javascript">
window.onload=init;
function init(){
var selecte_all=document.getElementById('selecte_all');
var selecte_no=document.getElementById('selecte_no');
var selecte_etr=document.getElementById('selecte_etr');
var check_list=document.getElementsByClassName('about');

selecte_all.onclick=function(){
for(i=0;i<check_list.length;i++){
check_list[i].checked=true;
};
}

selecte_no.onclick=function(){
for(i=0;i<check_list.length;i++){
check_list[i].checked=false;
};
}

selecte_etr.onclick=function(){
for(i=0;i<check_list.length;i++){
check_list[i].checked=!check_list[i].checked;
};
}
}

</script>
</body>
</html>

分享到:
评论

相关推荐

    利用jQuery实现CheckBox全选/全不选/反选的简单代码

    jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–&gt;测试通过,jquery-1.5.1.js–&gt;测试不通过。 实现CheckBox全选/全不选/反选代码如下: &lt;&#37;@ page language="java" ...

    jquery实现checkbox 全选/全不选的通用写法

    总结来说,jQuery实现checkbox全选/全不选的通用写法主要包含以下步骤: 1. 使用jQuery选择器获取所有需要操作的复选框。 2. 遍历这些复选框,根据全选按钮的状态设置每个复选框的`checked`属性。 3. 提供一个辅助...

    javascript复选框实现批量选择

    2. 在列表下方放置一个“全选/全不选”复选框,当选中“全选/全不选”复选框后,列表中的所有复选框都选中,当取消“全选/全不选”复选框后,列表中的所有复选框都取消选中。 3. 当列表中的复选框都取消选中后,...

    flex datagrid checkbox 全选/反选

    ### Flex DataGrid Checkbox 全选/反选知识点详解 #### 一、概述 Flex DataGrid 控件是Adobe Flex框架中的一个重要组成部分,它提供了一个灵活的方式来展示数据列表,并且支持多种功能,如排序、分组、筛选等。在...

    DataGridView表头添加checkbox实现全选反选

    此外,可能还需要处理`DataGridView`的`UserAddedRow`和`UserDeletedRow`事件,确保新添加或删除的行能正确响应全选/反选操作。同时,如果数据源是从数据库或其他外部数据源加载的,更新数据时也需要考虑这些选择...

    AjaxPro实例集合实现技术: 无刷新 验证指定字符 验证数字 验证邮箱 无刷新下拉菜单三级联动 CheckBox全选/反选/删除 等等..

    实现技术: 无刷新 验证指定字符 验证数字 验证邮箱 无刷新下拉菜单三级联动 CheckBox全选/反选/删除 等等.. 程序收集了本人在ASP.NET开发应用中会经常用到的轻量级的AJAX小例子,程序里面很多地方做了注释,通俗易懂...

    checkbox全选/取消全选以及checkbox遍历jQuery实现代码

    "checkbox全选/取消全选以及checkbox遍历jQuery实现代码" CheckBox全选/取消全选是指在一个CheckBox组中,选择或取消选择所有CheckBox的功能。这种功能在实际应用中非常常见,例如在多选题中,用户可以选择所有选项...

    Checkbox全选问题

    HtML javascritp checkbox 全选HtML javascritp checkbox 全选

    原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

    &lt;dd&gt;&lt;span&gt;2010-12-12&lt;/span&gt;&lt;input type="checkbox" name="jsitems" value="" /&gt;原生JS实现的全选/全不选,点行也可选中或取消&lt;/dd&gt; &lt;!-- 更多dd元素... --&gt; &lt;/dl&gt; &lt;/form&gt; ``` 接下来是原生JavaScript的核心...

    JQ checkbox 全选和全不选

    然后,为需要全选/全不选的每个子复选框分配一个共同的类名,比如`.childCheckbox`。 ```html &lt;input type="checkbox" id="selectAll" /&gt; 全选 &lt;br/&gt; &lt;input type="checkbox" class="childCheckbox" /&gt; ...

    winform DataGridView表头带CheckBox全选

    通过以上步骤,我们就成功地在`Winform DataGridView`的表头添加了一个`CheckBox`,实现了全选/全不选的功能。这样的设计使得用户可以便捷地对大量数据进行操作,提高了应用的实用性。在实际项目中,可能还需要考虑...

    js与jQuery实现checkbox复选框全选/全不选的方法

    本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法。分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法。这应该是一个比较实用的前端技巧吧,很多时候我们都...

    C# Winform DatagridView 分页及 全选/ 取消全选 功能

    1. 添加一个复选框控件,作为全选/取消全选的开关。 2. 绑定复选框的`CheckedChanged`事件。 3. 在事件处理程序中,如果复选框被选中,调用`dataGridView.SelectAll()`;反之,调用`dataGridView.ClearSelection()`...

    checkbox全选与全不选 xml解析导入与导出 IE下点击select的option单击事件

    function CheckAll(form)根据name=chkAll的checkBox的选中与否来设置其它checkBox全选与全不选,并激活一个事件来验证表单 function UnselectAll(form)取消选择 function ExportXML(checkboxName)导出xml模板文件 ...

    checkbox切换全选与全不选

    《锋利的jquery》利用this.checked判断全选与全不选

    DevExpress 实现checkbox全选效果.rar

    1. **创建界面**:在界面上添加一个`CheckEdit`控件,作为全选/全不选的主开关,并添加一系列的其他`CheckEdit`控件,代表可选的各个项目。 2. **事件绑定**:为全选`CheckEdit`控件的`CheckedChanged`事件绑定事件...

    javascript 实现复选框全选/取消功能

    ### JavaScript 实现复选框全选/取消功能 在网页开发中,经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能,并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...

    jquery Checkbox 全选 反选 全不选 多种实现方法

    如果有多个全选/反选控制,可以使用事件委托,减少事件绑定的数量: ```javascript $(document.body).on('click', '.select-group', function() { var checkboxes = $(this).data('checkboxes'); checkboxes....

Global site tag (gtag.js) - Google Analytics