html代码

<input type='checkbox' value="10" name="frust"/>苹果10元
<br/>
<input type='checkbox' value="20" name="frust" />西瓜20元
<br/>
<input type='checkbox' value="30" name="frust" />桃子30元
<br/>
<input type='checkbox' value="40" name="frust" />桂圆40元
<br/>
<input type='checkbox' value="50" name="frust">火龙果50元
<br/><br/><br/>
<input type="checkbox" onclick="allcheck(this)" id="chose"/>全选
<button id='btn' onclick="fanxuan">反选</button>

javascript:

 function allcheck(currentobj){

         var frusts = doucment.getElementsByName('frust');

             if(currentobj.checked){

      for(var i=0;i<frusts.length;i++){

          frusts[i].checked=true;

      }

    }else{

         for(var i=0;i<frusts.length;i++){

          frusts[i].checked=false;

      }

      }

  }
function fanxuan(){
var frusts = document.getElementsByName('frust');
for(var i=0;i<frusts.length;i++){
if(frusts[i].checked){
frusts[i].checked = false;
}else{
frusts[i].checked = true;
}
}
}

jquery:

<script src="jquery.min.js" type="text/javascript"></script>
<script type="javascript">
$(document).ready(function(e){
$("#chose").bind('click',function(){
if($(this).attr('checked')){
$("input[name='frust']").prop('checked',true);
}else{
$("input[name='frust']").prop('checked',false);
}
}); })
$(document).ready(function(e){
$("#btn").click(function(){
$("input[name='frust']").each(function(){
if($(this).attr('checked')){
$(this).prop('checked',false); //也可以使用$(this).removeAttr("checked");
}else{
$(this).prop('checked',true);//$(this).attr("checked","checked");这些写也可以 我记得radio与checkbox选中一个是true一个是checked=checked
}
});
});
})
</script>

js-使用JavaScript、jQuery两种方式实现全选/全不选的更多相关文章

  1. VS Code - Debugger for Chrome调试JavaScript的两种方式

    VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...

  2. 通过XMLHttpRequest和jQuery两种方式实现ajax

    一.XMLHttpRequest实现获取数据 不使用jQuery实现页面不刷新获取内容的方式,我们这里采用XMLHttpRequest原生代码实现:js代码如下: //1.获取a节点,并为其添加Onc ...

  3. js实现继承的两种方式

    这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...

  4. JS调用webservice的两种方式

    协议肯定是使用http协议,因为soap协议本身也是基于http协议.期中第二种方式:只有webservice3.5以后版本才可以成功 第一种方式:构造soap格式的body,注意加粗的黄色标识,比如 ...

  5. JS对象转URL参数(原生JS和jQuery两种方式)

    转自:点击打开链接 现在的js框架将ajax请求封装得非常简单,例如下面: $.ajax({ type: "POST", url: "some.php", da ...

  6. js 函数定义的两种方式以及事件绑定(扫盲)

    一.事件(例如:onclick)绑定的函数定义放在jsp前面和放后面没影响 二. $(function() { function func(){}; }) onclick通过如下方式绑定事件到jsp中 ...

  7. JS调用函数的两种方式

    <script type="text/javascript"> window.onload = init; //onload 表示页面全部加载完毕后,再调用init() ...

  8. JS定义函数的两种方式:函数声明和函数表达式

    函数声明 关于函数声明的方式,它的一个重要的特性就是函数声明提升(function declaration hoisting),意思是在执行代码之前会先读取函数声明.这就意味着可以把函数声明放在调用它 ...

  9. svg中实现文字随曲线走向,HTML直接写和JavaScript创建对象两种方式

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

随机推荐

  1. RAC环境下误操作将数据文件添加到本地存储

    今天碰到个有意思的事情,有客户在Oracle RAC环境,误操作将新增的数据文件直接创建到了其中一个节点的本地存储上. 发现网上去搜的话这种问题还真不少,对应解决方案也各式各样,客户问我选择哪种方案可 ...

  2. Jrebel热部署配置完整教程(IntelliJ IDEA、Jrebel、spring boot、springboot、eclipse、Tomcat)

    标签:IntelliJ IDEA.Jrebel.spring boot.springboot.eclipse.Tomcat1.安装插件并激活插件安装参考:http://blog.csdn.net/u0 ...

  3. 用vue2.x注册一个全局的弹窗alert组件

    一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义 ...

  4. sqlserver的四种分页方式

    第一种:ROW_NUMBER() OVER()方式 select * from ( select *, ROW_NUMBER() OVER(Order by ArtistId ) AS RowId f ...

  5. 【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

    关于 chrome 扩展的文章,很久之前也写过一篇.清除页面广告?身为前端,自己做一款简易的chrome扩展吧. 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点. 什么是 chrome 扩展 ...

  6. eclipse 常用插件 整理

    开发过程中的常用Eclipse插件,按字母排序: (1)    AmaterasUML        介绍:Eclipse的UML插件,支持UML活动图,class图,sequence图,usecas ...

  7. 蓝桥杯第七届C/C++B省赛凑算式

    第三题: 凑算式 B      DEF A + --- + ------- = 10        C     GHI (如果显示有问题,可以参见[图1.jpg]) 这个算式中A~I代表1~9的数字, ...

  8. CCF-201512-1-数位之和

    问题描述 试题编号: 201512-1 试题名称: 数位之和 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定一个十进制整数n,输出n的各位数字之和. 输入格式 输入一个整 ...

  9. MongoDb安装--yum安装

    本帖最后由 草包 于 2017-5-2 09:57 编辑 [Shell] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 ...

  10. Centos-6.5 + python3 + mysql5.6 环境搭建

    注意:Centos6.5 是刚装好的系统 yum install lrzsz  (ftp上传和下载) yum install -y gcc     yum install -y gcc gcc-c++ ...