`
sbiigu
  • 浏览: 163382 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

全选的js

 
阅读更多
<body>
<form name="Form1">

<input name="allbox" type="checkbox" onClick="TA();" title="选中或清除选中所有的项目" tabindex="105">选中或清除选中所有的项目

<br/>
<span class="X">
<input type="checkbox" name="ABC" class="A" onClick="TTA(this);">清明时节</span>
<br/>
<span class="X">
<input type="checkbox" name="DEF" class="A" onClick="TTA(this);">长江水啊</span>
<br/>
<span class="X">
<input type="checkbox" name="GHL" class="A" onClick="TTA(this);">嘿嘿测试</span>
<br/>
</form>

<script language="javascript">
var frm = document.Form1;
</script>


<script language="JavaScript">

function TA(isO,noHL){
var trk = 0;


for(var i=0;i<frm.elements.length;i++){
  var e=frm.elements[i];

  if((e.name !='allbox') && (e.type == 'checkbox')){
    e.checked = frm.allbox.checked;
   if (frm.allbox.checked){
    //e.parentElement.className = "H"; //.parentElement不兼容firefox浏览器
    e.parentNode.className = "H";//调用设置父节点元素class改变背景色
  
   }else{
    e.parentNode.className = "X";//调用设置父节点元素class改变背景色
   }
  }
}
}

function TTA(CB,noHL){
if (CB.checked){
  CB.parentNode.className = "H";
}else{
  CB.parentNode.className = "X";
}



var TB=TO=0;
for (var i=0;i<frm.elements.length;i++){
  var e=frm.elements[i];
  if ((e.name != 'allbox') && (e.type=='checkbox')){
   TB++;
  if (e.checked)
   TO++;
  }
}
frm.allbox.checked=(TO==TB)?true:false;
//如果不是所有项被选中则allbox设定未被选中
}


</script>

<style>
.H{
background: #ADD8E6
}
.X{
background: #FFFFFF
}

</style>


</body>
分享到:
评论

相关推荐

    淘宝购物车全选js

    "淘宝购物车全选js"这个话题主要涉及JavaScript技术在实现购物车全选功能中的应用。JavaScript是一种轻量级的解释型编程语言,常用于网页和网络应用的前端开发,可以实现实时的用户交互。 1. **全选按钮功能**: ...

    checkedbox全选 js文件

    HTML checkbox js全选 相信可以对您有用,js全选

    gridview全选(js实现)

    在这个场景下,JavaScript(简称js)作为一种客户端脚本语言,可以很好地实现这种交互。本文将详细探讨如何通过JavaScript实现GridView的全选功能,并提供相关代码示例。 首先,我们需要了解JavaScript的基本语法和...

    全选js.txt

    根据提供的文件信息,我们可以分析出该文件主要涉及的是JavaScript中实现对页面内所有复选框进行全选、反选及取消选择的功能。接下来,我们将详细解释这些功能的实现原理及代码逻辑。 ### 1. 全选功能实现 在文件...

    JavaScript 全选全不选

    JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选

    html css js表单中全选取消反选效果

    通常,我们会使用`&lt;input type="checkbox"&gt;`元素来表示每个可选项,并添加一个主控的全选按钮,通常是一个复选框,它的`id`为"全选",以便稍后通过JavaScript引用。 ```html 全选/取消全选 选项1 ...

    js实现全选效果

    在JavaScript(JS)中,全选效果是一种常见的用户交互功能,尤其在网页表格或列表中。这个功能允许用户通过单击一个按钮或链接来选择所有可选项目,或者取消已选中的所有项。这里我们将详细探讨如何使用JavaScript...

    Javascript实现全选反选

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

    datagrid全选(JS)

    通过上述介绍,我们可以看到,使用简单的JavaScript代码即可实现数据表格的全选和反选功能。这不仅提高了用户的操作效率,还提升了应用程序的整体体验。开发者可以根据实际需求调整代码逻辑,例如增加更多高级功能或...

    js 全选反选取消,url传递中文,防盗链,反射显示程序集,URLRewrite

    js 全选反选取消, ASP.NET中url传递中文的解决方案, C#中使用反射显示程序集的所有类型和属性, js怎么取表格中的某一行的值, SQL Server 查询分析器快捷键集合, URLRewrite能够对URL进行重写,失败的原因

    js全选单选集合

    在JavaScript(JS)中,全选和单选是常见的用户交互功能,常见于表格、列表等数据展示场景。用户可能需要一键选择所有选项,或者独立选择单个元素。本篇文章将深入探讨如何实现这些功能,并结合提供的`test.html`...

    js 全选——清空

    在JavaScript(JS)中,"全选"和"清空"功能是常见于表单、列表等用户界面操作中的重要部分。这些功能允许用户快速选取或清除所有项目,提高交互体验。下面将详细介绍如何实现这样的功能,并提供相关知识点。 1. **...

    简单js实现全选全部选反选效果

    在JavaScript编程中,全选和反选功能是常见的交互元素,尤其在表格或者多选列表中,用户往往希望一键选择或取消所有选项。本话题将深入探讨如何利用JavaScript实现这样的功能,以提升用户体验。 首先,我们需要理解...

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

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

    常用的js全选checkbox按钮的功能

    在网页开发中,JavaScript(简称JS)是一种必不可少的脚本语言,它被广泛用于实现页面上的交互性功能。本文将详细讲解如何利用JS实现“全选”checkbox按钮的功能,这在许多网页表单中非常常见,例如批量选择、批量...

    JS实现全选、反选

    JS JS实现全选反选 全选 反选

    spreadjs_列头添加复选框全选功能-demo.zip

    在这个HTML文件中,我们将看到SpreadJS的初始化代码,以及用于实现复选框全选功能的相关JavaScript逻辑。例如,我们需要引入 SpreadJS 的核心库,如 "gc.spread.sheets.all.14.1.1.min.js",这是一个包含了SpreadJS...

    js全选效果

    JavaScript(简称JS)是一种轻量级的解释型编程语言,广泛应用于网页和网络应用开发,特别是在客户端渲染的应用中。在网页交互中,全选效果是一个常见的功能,它允许用户一次性选择页面上的所有元素,比如表格数据、...

    JS控制选择框全选取消全选

    本文将详细解析如何利用JS控制选择框(通常为复选框)的全选与取消全选功能,以及在此基础上实现批量操作。 ### 核心知识点:JS控制选择框全选/取消全选 #### 1. HTML结构定义 在HTML文档中,选择框(复选框)由`...

    js全选js全选js全选js全选

    自用 勿下!!勿下!!勿下!!勿下!!勿下!!勿下!!勿下!!勿下!!勿下!!勿下!!勿下!!勿下!!

Global site tag (gtag.js) - Google Analytics