js-使用JavaScript、jQuery两种方式实现全选/全不选
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两种方式实现全选/全不选的更多相关文章
- VS Code - Debugger for Chrome调试JavaScript的两种方式
VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...
- 通过XMLHttpRequest和jQuery两种方式实现ajax
一.XMLHttpRequest实现获取数据 不使用jQuery实现页面不刷新获取内容的方式,我们这里采用XMLHttpRequest原生代码实现:js代码如下: //1.获取a节点,并为其添加Onc ...
- js实现继承的两种方式
这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...
- JS调用webservice的两种方式
协议肯定是使用http协议,因为soap协议本身也是基于http协议.期中第二种方式:只有webservice3.5以后版本才可以成功 第一种方式:构造soap格式的body,注意加粗的黄色标识,比如 ...
- JS对象转URL参数(原生JS和jQuery两种方式)
转自:点击打开链接 现在的js框架将ajax请求封装得非常简单,例如下面: $.ajax({ type: "POST", url: "some.php", da ...
- js 函数定义的两种方式以及事件绑定(扫盲)
一.事件(例如:onclick)绑定的函数定义放在jsp前面和放后面没影响 二. $(function() { function func(){}; }) onclick通过如下方式绑定事件到jsp中 ...
- JS调用函数的两种方式
<script type="text/javascript"> window.onload = init; //onload 表示页面全部加载完毕后,再调用init() ...
- JS定义函数的两种方式:函数声明和函数表达式
函数声明 关于函数声明的方式,它的一个重要的特性就是函数声明提升(function declaration hoisting),意思是在执行代码之前会先读取函数声明.这就意味着可以把函数声明放在调用它 ...
- svg中实现文字随曲线走向,HTML直接写和JavaScript创建对象两种方式
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
随机推荐
- C++ sqlite3解决中文排序问题
导言:sqlite3默认的编码方式为UTF8编码,而在UTF8编码下,中文不是按照拼音顺序编码的,所以想解决中文排序问题,必须自定义排序规则,将UTF8编码转换成GB2312编码(GB2312编码中文 ...
- 关于 use-default-filters 属性的说明
原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7940755.html ------------------------------------ ...
- JSONP原理解析
前言 我工作以来接触的第一个项目就是前后端分离的,前端静态文件有自己独立域名,通过接口来获取数据进行渲染等操作. 跨域的方法不需要多言,随便一搜,就有很多,但最常用不外乎jsonp和CORS.json ...
- Python函数篇(二)之递归函数、匿名函数及高阶函数
1.全局变量和局部变量 一般定义在程序的最开始的变量称为函数变量,在子程序中定义的变量称为局部变量,可以简单的理解为,无缩进的为全局变量,有缩进的是局部变量,全局变量的作用域是整个程序,而局部变量的作 ...
- 一步步搭建Retrofit+RxJava+MVP网络请求框架(一)
首先,展示一下封装好之后的项目的层级结构. 1.先创建一个RetrofitApiService.java package com.xdw.retrofitrxmvpdemo.http; import ...
- 什么是BSD?
BSD (Berkeley Software Distribution,伯克利软件套件)是Unix的衍生系统,1970年代由加州大学伯克利分校开创.BSD用来代表由此派生出的各种套件集合. BS ...
- gtk+3.0的环境配置及基于gtk+3.0的python简单样例
/********************************************************************* * Author : Samson * Date ...
- 使用asyncsocket群聊
#import "ViewController.h" #import "AsyncSocket.h" @interface ViewController ()& ...
- 自学Zabbix3.9.3-模板Templates-嵌套Nesting
自学Zabbix3.9.3-模板Templates-嵌套Nesting 嵌套是一个模板包含一个或多个其他模板的方法.可以在一个"嵌套"模板中将一些模板链接在一起.嵌套的好处在于,只 ...
- 自学Python2.7-collections系列
Python collections系列 Python拥有一些内置的数据类型,比如str, int, list, tuple, dict等, collections模块在这些内置数据类型的基础上,提供 ...