`
liqian5251
  • 浏览: 16857 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

checkbox实现全选反选

阅读更多
<html>
<head>
<title>checkradio.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function getCheck(){
var favs = document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
if(favs[i].checked){
alert(favs[i].value);
//break;//单选框  只有一个被选择
}
if(favs[i].value==3){
favs[i].checked=true;
}
}
}
function operMusic(type){
var music = document.getElementsByName("music");
for(var i=0;i<music.length;i++){
if(type=="all"){
music[i].checked = true;
}else if(type=="no"){
music[i].checked = false;
}else if(type=="other"){
music[i].checked = !music[i].checked;
}
}
}
</script>
</head>
<body>
This is my HTML page.
<br>
<input type="checkbox" name="fav" value="1"/>足球
<input type="checkbox" name="fav" value="2"/>篮球
<input type="checkbox" name="fav" value="3"/>桌球
<input type="checkbox" name="fav" value="4"/>乒乓球
<input type="checkbox" name="fav" value="5"/>排球
<input type="checkbox" name="fav" value="6"/>玻璃球
<input type="checkbox" name="fav" value="7"/>网球
<hr/>
<input type="button" value="getCheck" onclick="getCheck();"/>
<hr/>
<input type="checkbox" name="music" value="11"/>爱情买卖<br/>
<input type="checkbox" name="music" value="12"/>两只蝴蝶<br/>
<input type="checkbox" name="music" value="13"/>好日子<br/>
<input type="checkbox" name="music" value="14"/>我要去西藏<br/>
<input type="checkbox" name="music" value="15"/>我和你<br/>
<input type="checkbox" name="music" value="16"/>化蝶<br/>
<input type="checkbox" name="music" value="17"/>时间都去哪了<br/>
<input type="checkbox" name="music" value="18"/>忐忑<br/>
<input type="checkbox" name="music" value="19"/>法海不懂爱<br/>
<input type="checkbox" name="music" value="10"/>爱你一万年<br/>
<hr/>
<input type="button" value="全选" onclick="operMusic('all');"/>
<input type="button" value="反选" onclick="operMusic('other');"/>
<input type="button" value="全否" onclick="operMusic('no');"/>
</body>
</html>
分享到:
评论

相关推荐

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

    在Windows应用程序开发...总之,`DataGridView`表头添加`CheckBox`实现全选反选涉及了控件创建、事件处理、数据绑定以及用户交互等多个方面。理解这些知识点可以帮助开发者更有效地构建功能丰富的数据查看和编辑界面。

    checkbox实现全选和反选经典例子

    3. **全选和反选实现** - **全选Checkbox**:通常位于表格上方,当用户勾选此Checkbox时,所有行的Checkbox会被设置为选中状态。这可以通过监听全选Checkbox的`CheckedChanged`事件来实现,然后遍历DataGridView的...

    android checkbox全选反选

    "Android CheckBox全选反选"这个话题主要涉及如何在ListView中实现CheckBox的选择与反选择操作,包括全选和反选的功能。ListView是Android系统提供的一种列表视图,它可以显示大量数据并允许用户进行交互。下面我们...

    DataGridView标头CheckBox全选反选

    而在这个特定的场景中,我们需要实现一个增强的功能:在`DataGridView`的列头添加一个`CheckBox`,通过这个`CheckBox`可以实现所有行中对应复选框的全选或反选操作。这个功能在数据管理界面中十分常见,例如在批量...

    三种方式实现checkbox全选,反选

    以下是三种实现Checkbox全选和反选的方法,以及它们的JavaScript和Java实现细节。 ### 方法一:使用`checked`属性 **JavaScript实现**: 在JavaScript中,可以通过获取全选按钮的`checked`属性来控制所有复选框的...

    Flex中DataGrid内嵌CheckBox的全选反选和防止选择状态错乱实现方法

    以上就是Flex中DataGrid内嵌CheckBox实现全选反选及防止选择状态错乱的基本步骤。通过自定义列类、监听CheckBox事件和处理全选/全反逻辑,我们可以创建一个功能完善的多选DataGrid。在实际项目中,还可以根据需求...

    jquery、js操作checkbox全选反选.docx

    ### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...

    JS实现checkbox的全选和反选

    资源名称:JS实现checkbox的全选和反选资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    jquery 一个checkbox控制全选与反选

    页面上通过一个checkbox实现全选与反选

    Checkbox全选反选.html

    Checkbox全选反选.html

    Javascript实现全选反选

    在JavaScript编程中,"全选反选"功能是常见的用户交互设计,常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目,极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...

    checkbox全选,反选,选特定的值

    js原生,checkbox全选,反选,选特定的值。jq会更简单。。初学时候比用的

    简单实现全选反选功能(html)

    在网页开发中,全选和反选功能是常见...总结来说,这个案例展示了如何使用HTML和jQuery实现全选/反选功能,以及如何处理用户交互。通过理解并实践这个例子,开发者可以更好地掌握网页中的动态交互设计,提高用户体验。

    CheckBoxList全选反选添加删除

    以上就是关于"CheckBoxList全选反选添加删除"的知识点。在实际开发中,你还需要处理一些细节,比如界面设计、事件响应等。提供的源码"StudyCheckBoxList"应该包含了实现这些功能的具体代码,可以作为学习和参考的...

    js checkbox全选 反选 取消全部设置表单checkbox复选框勾选

    本篇文章将详细讲解如何利用JavaScript实现`checkbox`的全选、反选和取消全部功能,以及相关的代码示例。 ### 1. `checkbox`基本概念 `checkbox`在HTML中通过`&lt;input type="checkbox"&gt;`标签创建。默认情况下,`...

    C#复选框实现全选反选和全不选

    在本教程中,我们将探讨如何利用C#实现复选框来控制DataGridView的数据全选、反选以及全不选,并在选中复选框后改变行的颜色。这将涉及到事件处理、数据绑定、自定义样式等多个方面。 首先,我们需要创建一个包含复...

    WPF CheckBox全选、反选比较通用

    本教程将详细介绍如何在WPF中实现CheckBox的全选和反选功能。 首先,我们需要理解CheckBox的基本用法。在XAML中,我们可以创建一个CheckBox并为其设置文本和初始状态: ```xml &lt;CheckBox Content="全选" x:Name=...

    android checkBox全选 反选

    本文将详细讲解如何实现CheckBox的全选和反选功能,并结合提供的"android checkBox全选 反选"的标题和描述,以及相关的标签,我们将探讨具体的实现策略。 首先,我们需要理解CheckBox的基本用法。在XML布局文件中,...

    实现table表格checkbox复选框的全选 反选

    接下来,我们使用JavaScript(通常配合jQuery库,但也可以使用原生JS)来实现全选/反选功能。这里我们使用jQuery: ```javascript $(document).ready(function() { $('#selectAll').click(function() { if ($...

    android ListView中的checkBox全选和反选Demo

    综上所述,这个“android ListView中的checkBox全选和反选Demo”主要展示了如何在ListView中集成CheckBox,实现列表项的全选和反选功能,以及如何优化Adapter以提高性能。理解并掌握这些知识点对于Android开发者来说...

Global site tag (gtag.js) - Google Analytics