<一>初探js特效魅力之全选不选反选04

最新推荐文章于 2019-01-07 23:14:41 发布
最新推荐文章于 2019-01-07 23:14:41 发布
阅读量957 收藏
点赞数
分类专栏： html javaScript 文章标签： js魅力 初探js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011096030/article/details/12372083
版权
本文介绍了JavaScript在实际项目中的应用技巧，包括如何正确放置JS代码避免误删、使用window.onload确保DOM加载完成后再执行JS代码，以及通过for循环和getElementsByTagName实现复选框的全选、反选与不选功能。
摘要由CSDN通过智能技术生成

初探js特效魅力04

我们在进入到公司里面工作的时候，做一个同一个项目，经常是大家分工合作，当我们写css时，一般不写在行间，因为这样会被误操作，也就是被乱删了都不知道，这样的后果是很难检查的 ，因为一个项目做下来，到最后，代码一大把，看着都头疼，

接下来就是教大家如何提取行间样式并作为函数调用，如下

<!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" />
<title>js特效</title>
<!-- <link id="link1" rel="stylesheet" type="text/css" href="css1.css" />-->
<script>
 window.οnlοad=function(){
  var oDiv=document.getElementById("btn1");  
  oDiv.οnclick=function(){
   alert('a'); 
  }
 }
 </script>
</head>

</style>
<body>
    <input type="button" value="按钮" id="btn1"/> 
</body>
</html>

向上面一样，样式和js我们一般不写在标签里面，通常写在head里面，但是大家要记住，js是一行行执行的，像我们这个方法，一定要在前面加上window.onload，意思就是页面加载完执行这个方法，如果没有window.onload,页面就会报错，因为它找不到按钮的id。

利用for循环、getElementsByTagName的方法让复选框全选、反选、不选功能

<!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" />
<title>js特效</title>
<!-- <link id="link1" rel="stylesheet" type="text/css" href="css1.css" />-->

<script>
 window.οnlοad=function(){
  var btn1=document.getElementById("btn1");
  var btn2=document.getElementById("btn2");
  var btn3=document.getElementById("btn3");
  var oDiv=document.getElementById("div1");
  var ach=oDiv.getElementsByTagName("input");
  btn1.οnclick=function(){
   for(var i=0;i<ach.length;i++){
    ach[i].checked=true;
   }
  }
  btn2.οnclick=function(){
   for(var i=0;i<ach.length;i++){
    ach[i].checked=false;
   } 
  }
  btn3.οnclick=function(){
   for(var i=0;i<ach.length;i++){
    if(ach[i].checked==true){
     ach[i].checked=false;
    }
    else{
     ach[i].checked=true; 
    }
   }  
  }
 }
 </script>
</head>

</style>
<body>
 <input type="button" value="全选" id="btn1"/><br />
    <input type="button" value="不选" id="btn2"/><br />
    <input type="button" value="反选" id="btn3"/><br />
    <div id="div1">
     <input type="checkbox"/><br />
        <input type="checkbox"/><br />
        <input type="checkbox"/><br />
        <input type="checkbox"/><br />
        <input type="checkbox"/><br />
        <input type="checkbox"/><br />
        <input type="checkbox"/><br />
        <input type="checkbox"/><br />
        <input type="checkbox"/><br />
    </div>
   
</body>
</html>

 未完待续，请继续查看初探js特效魅力05

简单js实现全选全部选反选效果
11-11
在JavaScript编程中，全选和反选功能是常见的交互元素，尤其在表格或者多选列表中，用户往往希望一键选择或取消所有选项。本话题将深入探讨如何利用JavaScript实现这样的功能，以提升用户体验。 首先，我们需要理解...
jQuery 全选 全部选 反选 实现代码
10-21
它包括了复选框、全选按钮、反选链接以及提交按钮，形成了一个完整的用户交互界面。 7. JavaScript代码组织 代码中的组织方式对于阅读和维护非常重要。文件中使用了立即执行函数表达式（IIFE）来封装jQuery的代码...
初探js魅力 (鼠标提示框、换肤、函数、重用、函数传参、.和[]、 全选不选和反选、选项卡)
weixin_40512519的博客
09-02 248
第一个JS特效：鼠标提示框 鼠标移入到input时，让div1显示。鼠标移出input时，div1隐藏。 &lt;style&gt; #div1{ width: 200px; height: 100px; background-color: #cccccc; border: 1px solid #999; ...
大年三十整理的asp.net资料！（不得不收藏）
谢威的专栏
09-05 2943
 大年三十整理的asp.net资料！（不得不收藏） http://blog.csdn.net/mengyao/archive/2007/02/17/1511356.aspx使用SqlBulkCopy类加载其他源数据到SQL表 在数据回发时，维护ASP.NET Tree控件的位置 vagerent的vs2005网站开发技巧 ASP.NET2.0
一些常用的技巧（内容设计到asp.net,javascript,sqlserver等）
11-03 1196
 使用SqlBulkCopy类加载其他源数据到SQL表在数据回发时，维护ASP.NET Tree控件的位置vagerent的vs2005网站开发技巧ASP.NET2.0小技巧－－内部控件权限的实现图片滚动代码。css——之三行三列等高布局Datagird TemplateColumn类型列中如何设定日期格式为yyyy-MM-dd格式？SQL Server各种日期计算方法在sqlserver中如何根
强！！整理的asp.net资料！（不得不收藏）
MK的专栏
03-21 2369
在数据回发时，维护ASP.NET Tree控件的位置 vagerent的vs2005网站开发技巧 ASP.NET2.0小技巧－－内部控件权限的实现 图片滚动代码。 css——之三行三列等高布局 Datagird TemplateColumn类型列中如何设定日期格式为yyyy-MM-dd格式？ SQL Server各种
大年三十整理的asp.net资料！（不得不收藏）(不得不转)
weixin_34355559的博客
12-21 218
使用SqlBulkCopy类加载其他源数据到SQL表 在数据回发时，维护ASP.NET Tree控件的位置 vagerent的vs2005网站开发技巧 ASP.NET2.0小技巧－－内部控件权限的实现 图片滚动代码。 css——之三行三列等高布局 Datagird TemplateColumn类型列中如何设定日期格式为yy...
转： 大年三十整理的asp.net资料！（经典）
02-25 436
使用SqlBulkCopy类加载其他源数据到SQL表 在数据回发时，维护ASP.NET Tree控件的位置 vagerent的vs2005网站开发技巧 ASP.NET2.0小技巧－－内部控件权限的实现 图片滚动代码。 css——之三行三列等高布局 Datagird TemplateColumn类...
(轉貼) 大年三十整理的asp.net资料！ (.NET) (ASP.NET)
weixin_34405332的博客
01-07 665
 大年三十整理的asp.net资料！ 使用SqlBulkCopy类加载其他源数据到SQL表 在数据回发时，维护ASP.NET Tree控件的位置 vagerent的vs2005网站开发技巧 ASP.NET2.0小技巧－－内部控件权限的实现 图片滚动代码。 css——之三行三列等高布局 Datagird ...
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
jQuery对checkbox 复选框的全选全不选反选的操作
10-21
<input type="checkbox" id="all">全选/全不选</br> <input type="button" value="全选" class="btn" id="selectAll"> <input type="button" value="全不选" class="btn" id="unSelect"> <input type="button" value...
JS实现的全选、全不选及反选功能【案例】
10-17
在JavaScript中，全选、全不选和反选功能是常见的用户交互操作，通常用于多选列表或表格中。以下是对这些功能的详细说明： **全选功能**： 全选功能允许用户一次性选中所有可选项。在给出的案例中，通过一个ID为`...
鼠标焦点离开文本框时验证
13东倍
07-18 9099
利用js来验证文本框的值 function onblurs(){    if(frm.name.value==""){        alert("请输入您的名字！"); }else if(frm.funny.value==""){       alert("爱好不得为空哦！"); }   }                  你的姓名：        
html网页抽奖
13东倍
08-27 3659
简单的html网页抽奖，利用js特性来抽取名单。   0.0      //声明一个数据装住待抽奖的名单    var name=new Array("谢明雪","李永岩","何群杰","覃娇","杨启宇","叶凯","黄初欢","陈倍","李春华","刘承发");    var numb=1;//抽到的先后顺序    //一个开始的方法    function
键盘字母游戏
13东倍
06-21 2468
游戏名称：键盘字母游戏  游戏简介：利用键盘字母游戏来帮助使用者熟悉键盘字母的位置，提高手指的灵活性  游戏类型：典型的益智游戏 游戏方式：点击开始时，会有很多带有字母的苹果下落，在苹果下落到底部之前，只要按键盘上相应的字母，苹果便 会消失，得分框便会加上10分，当得分达到目标分数时，便会进入下一关并且难度系数加大，随着难度的 加大
HTML网页版雷电游戏
13东倍
07-03 2384
雷电贝贝版          //start game    function start(){     //alert("start");     fighterMove(); //call fighter move way     //fireBullet(); //call fire Bullet way     enemyMove(); // call enemy move
JavaScript实现多选框全选与反选
"多选框全选反选的JavaScript实现" 在网页交互中，多选框（Checkbox）是常见的用户输入组件，常用于让用户选择多个选项。全选和反选功能可以方便用户快速勾选或取消所有选项，提高用户体验。本示例展示了如何使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值