返回顶部
首页 > 资讯 > 前端开发 > VUE >JavaScript中怎么利用CheckBox实现选中
  • 820
分享到

JavaScript中怎么利用CheckBox实现选中

2024-04-02 19:04:59 820人浏览 薄情痞子
摘要

这篇文章将为大家详细讲解有关javascript中怎么利用CheckBox实现选中,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript实现Ch

这篇文章将为大家详细讲解有关javascript中怎么利用CheckBox实现选中,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

JavaScript实现CheckBox选中所有的项的方法:

<html> <head> <title> title> <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>html>

关于JavaScript中怎么利用CheckBox实现选中就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: JavaScript中怎么利用CheckBox实现选中

本文链接: https://lsjlt.com/news/69745.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript中怎么利用CheckBox实现选中
    这篇文章将为大家详细讲解有关JavaScript中怎么利用CheckBox实现选中,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript实现Ch...
    99+
    2024-04-02
  • C# 中怎么利用CheckBox实现单选功能
    今天就跟大家聊聊有关C# 中怎么利用CheckBox实现单选功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。DataGrid中加入CheckBox,并实现c# CheckBox单选...
    99+
    2023-06-17
  • Repeater中怎么利用checkbox实现全选功能
    这篇文章将为大家详细讲解有关Repeater中怎么利用checkbox实现全选功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一、HTML代码:<input name=&q...
    99+
    2023-06-17
  • C#中怎么利用CheckBox实现翻页选中功能
    C#中怎么利用CheckBox实现翻页选中功能,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。C#实现CheckBox翻页选中//OnPageIndexChang...
    99+
    2023-06-17
  • C#中怎么利用 CheckBox判断是否选中
    C#中怎么利用 CheckBox判断是否选中,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。C# CheckBox选中的判断方法实现方法:右击菜单后弹出一窗体,新窗体上有一个Da...
    99+
    2023-06-17
  • Angular4中的checkbox全选按钮启用禁用怎么实现
    这篇文章主要介绍“Angular4中的checkbox全选按钮启用禁用怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Angular4中的checkbox全选按钮启用禁用怎么实现”文章能帮助大...
    99+
    2023-07-05
  • javascript checkbox全选和反选的简单实现
    javascript checkbox全选和反选的简单实现 发现这样写checkbox全选和反选最简洁明了。function tempUser(val){ $("input[name='userid']").each(fun...
    99+
    2023-05-31
    javascript checkbox 全选
  • Android中ListView + CheckBox实现单选、多选效果
    还是先来看看是不是你想要的效果: 不废话,直接上代码,很简单,代码里都有注释 1 单选 public class SingleActivity extends AppCom...
    99+
    2022-06-06
    checkbox listview Android
  • jquery实现全选、反选、获得所有选中的checkbox
    下面是使用 jQuery 实现全选、反选和获取所有选中的 checkbox 的示例代码:```htmljQuery全选、反选、获取选...
    99+
    2023-08-17
    jQuery
  • 怎么用css3实现checkbox复选框和radio单选框
    这篇文章主要介绍“怎么用css3实现checkbox复选框和radio单选框”,在日常操作中,相信很多人在怎么用css3实现checkbox复选框和radio单选框问题上存在疑惑,小编查阅了各式资料,整理出...
    99+
    2024-04-02
  • 怎么在python中利用filter()实现筛选
    本篇文章为大家展示了怎么在python中利用filter()实现筛选,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。python可以做什么Python是一种编程语言,内置了许多有效的工具,Python...
    99+
    2023-06-15
  • jquery checkbox选中事件怎么设置
    你可以使用change事件来监听页面复选框的选中状态变化。以下是一个示例: HTML代码: 选项 jQuery代码: $(docum...
    99+
    2023-10-24
    jquery
  • JavaScript 中怎么利用DOM实现文档遍历
    本篇文章给大家分享的是有关JavaScript 中怎么利用DOM实现文档遍历,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。<!--<...
    99+
    2024-04-02
  • JavaScript中怎么利用DOM实现数据访问
    本篇文章给大家分享的是有关JavaScript中怎么利用DOM实现数据访问,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。通过JavaScrip...
    99+
    2024-04-02
  • 怎么在JQuery中利用has()方法实现筛选
    这期内容当中小编将会给大家带来有关怎么在JQuery中利用has()方法实现筛选,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。jquery是什么jquery是一个简洁而快速的JavaScript库,它具有...
    99+
    2023-06-14
  • jQuery如何实现table中两列CheckBox只能选中一个
    这篇文章将为大家详细讲解有关jQuery如何实现table中两列CheckBox只能选中一个,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。//html<table&...
    99+
    2024-04-02
  • 如何实现javascript操作input标签属性checkbox全选
    这篇文章主要为大家展示了“如何实现javascript操作input标签属性checkbox全选”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何实现javas...
    99+
    2024-04-02
  • C# 中怎么对CheckBox选项进行遍历
    这篇文章将为大家详细讲解有关C# 中怎么对CheckBox选项进行遍历,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。//遍历CheckBox方法1   &nbs...
    99+
    2023-06-17
  • 怎么利用JavaScript 实现继承
    小编给大家分享一下怎么利用JavaScript 实现继承,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、背景简介JavaScript 在编程语言界是个...
    99+
    2023-06-29
  • 怎么在JavaScript中利用sharedWorker 实现多页面通信
    怎么在JavaScript中利用sharedWorker 实现多页面通信?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。javascript是一种什么语言javascript...
    99+
    2023-06-14
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作