JavaScript中怎么利用CheckBox实现选中
这篇文章将为大家详细讲解有关JavaScript中怎么利用CheckBox实现选中，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
站在用户的角度思考问题，与客户深入沟通，找到永昌网站设计与永昌网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站制作、做网站、企业官网、英文网站、手机端网站、网站推广、域名申请、网页空间、企业邮箱。业务覆盖永昌地区。
JavaScript实现CheckBox选中所有的项的方法：
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></pre><p>关于JavaScript中怎么利用CheckBox实现选中就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。</p> <br> 文章标题：JavaScript中怎么利用CheckBox实现选中 <br> 文章路径：<a href="http://myzitong.com/article/ihjedi.html">http://myzitong.com/article/ihjedi.html</a> </div> </div> <div class="contentr fr"> <h3>其他资讯</h3> <ul> <li> <a href="/article/hphdce.html">vb.net添加控件 vbnet添加控件</a> </li><li> <a href="/article/hphdcg.html">linux中的删除命令 linux的删除命令是什么</a> </li><li> <a href="/article/hphdcc.html">linux命令板安装教程 linux的安装方法</a> </li><li> <a href="/article/hphdec.html">mysql多表连接怎么连 数据库 多表连接</a> </li><li> <a href="/article/hphopg.html">c语言指针函数用的多吗 c语言中指针函数的用法</a> </li> </ul> </div> </div> </div> <!--底部--> <footer> <div class="foot"> <div class="container"> <h1>梓潼大橙子建站您身边的网站制作服务商</h1> <div class="foot1"> <ul> <li> <dl><i class="iconfont"></i><b>地址ADDRESS</b></dl> <p>四川-成都青羊区太升南路288号<br> 锦天国际A座10楼 </p> </li> <li> <dl><i class="iconfont"></i><b>电话/TEL</b></dl> <p><a href="tel:02886922220" target="_blank">028 86922220</a> (工作日)<br> <a href="tel:18980820575" target="_blank">1898082 0575</a> ( 7x24 ) </p> </li> <li> <dl><i class="iconfont"></i><b>QQ咨询</b></dl> <p> 244261566 (售前)<br> 631063699 (售后) </p> </li> <li> <dl><i class="iconfont"></i><b>邮箱/E: mail</b></dl> <p> service@cdcxhl.com (业务)<br> hr@cdcxhl.com (求职) </p> </li> </ul> </div> <div class="link"> 友情链接： <a href="https://www.cdxwcx.com/wangzhan/app.html" title="app软件开发" target="_blank">app软件开发</a> <a href="http://www.ghjinhua.cn/" title="广汉锦华建材" target="_blank">广汉锦华建材</a> <a href="https://www.cdcxhl.com/" title="网站建设公司" target="_blank">网站建设公司</a> <a href="http://www.cdhuace.com/vi.html" title="vi形象设计" target="_blank">vi形象设计</a> <a href="https://www.xwcx.net/jigui.html" title="成都机房机柜租用" target="_blank">成都机房机柜租用</a> <a href="http://www.yunjinzhai.com/" title="云锦斋建筑" target="_blank">云锦斋建筑</a> <a href="http://www.scfsjd.com/" title="复盛机电设备" target="_blank">复盛机电设备</a> <a href="http://www.4006tel.net/mobile/" title="IOS开发" target="_blank">IOS开发</a> <a href="https://www.cdcxhl.com/xiangyingshi.html" title="响应式网站建设" target="_blank">响应式网站建设</a> <a href="http://www.sczitong.com/" title="彩乐斯" target="_blank">彩乐斯</a> </div> </div> </div> <div class="copy container"> Copyright