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. postman接口测试系列:接口参数化和参数的传递

    接着上一个章节时间戳和加密继续,上一节中我们使用Pre-Request Script可以正确获取时间戳和加密后的数据,接口响应结果也达到了预期目标.这里先简单说明一下接口的用例设计的测试点,截图所示 ...

  2. 从CentOS安装完成到生成词云python学习日记

    欢迎访问我的个人博客:原文链接 前言 人生苦短,我用python.学习python怎么能不搞一下词云呢是不是(ง •̀_•́)ง 于是便有了这篇边实践边记录的笔记. 环境:VMware 12pro + ...

  3. 自学python笔记(一)

    一   简介:Python是著名的"龟叔"Guido van Rossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言.其他的就不说了..... python是 ...

  4. 弄明白python reduce 函数

    作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/understanding-python-reduce-function.html 原创文章,转载请 ...

  5. 从a标签传值中文乱码解决

    <% out.print(new String(request.getParameter("a标签的参数").getBytes("iso8859-1"), ...

  6. Spring Cloud Eureka Server集群Demo级搭建

    将上篇随笔Spring Cloud Eureka服务Demo级搭建进行改造,改造成一个在本机的伪集群 1.修改hosts文件(windows10 hosts文件位置:C:\Windows\System ...

  7. MySQL服务找不到了,navicat打不开数据库连接

    今天打开Navicat看看连接名,突然发现连接不上了,打开服务发现MySQL服务不见了,所以手动安装了遍MySQL服务. 详细步骤如下: 1.管理员身份打开cmd,切换到MySQL安装目录下的bin目 ...

  8. [PHP基础]有关isset empty 函数的面试题

    用isset()和empty()判断下面的变量. $str = ''; $int = 0 ; $arr = array(); isset($str) 返回的是 true 还是 false empty( ...

  9. Android破解学习之路(二)——Android游戏 滚动的天空破解

    经过上一期的破解教程,相信大家跟我一样都是对破解是初入门,我们破解的目的是什么? 赚钱吗?百度上一大堆破解版的应用,破解的人有赚到钱吗?实实在在的说,其实也是方便自己而已. 玩个游戏,感觉过不去了,来 ...

  10. oracle用户被锁定

    sqlplus sys/password@localhost:1521/cmsx as sysdba SQL*Plus: Release 11.2.0.1.0 Production on 星期一 7月 ...