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 ...
随机推荐
- js实现谷歌网站统计
基本方法 function ga() { if (window.ga) { window.ga.apply(null, arguments); } else { stack.push(argument ...
- Java分布式锁之数据库实现
之前的文章<Java分布式锁实现>中列举了分布式锁的3种实现方式,分别是基于数据库实现,基于缓存实现和基于zookeeper实现.三种实现方式各有可取之处,本篇文章就详细讲解一下Java分 ...
- Vue 事件
一.事件冒泡 方法一.使用event.cancelBubble = true来阻止冒泡 <div @click="show2()"> <input type=&q ...
- 【luogu P2002】消息扩散
https://www.luogu.org/problem/show?pid=2002 SCC缩点的模板题,缩点后统计入度为0的点的数量就完了. #include <iostream> # ...
- Python之编程基础(编程语言分类)
一.编程语言简介 编程语言主要从以下几个角度进行分类,编译型和解释型.静态语言和动态语言.强类型定义语言和弱类型定义语言. 1.编译型跟解释型 编译型,其实他和汇编语言是一样的,也是有一个负责翻译的程 ...
- python 3.6 tkinter+urllib+json 火车车次信息查询
--------blogs: 陈月白 http://www.cnblogs.com/chenyuebai -------- 一.概述 妹子工作时需要大量地查询火车车次至南京的信息,包括该 ...
- C++中指向类的指针
事情缘起是因为上班途中刷到了有个微博,那人说答对这个问题的请发简历. 看了就是关于指向C++类的指针的知识,原代码类似下面这样: class NullPointCall { public: void ...
- Java爬虫——模拟登录知乎
登录界面,首先随意输入一个账号,登录查看发送表单的请求 可以发现请求是Post : https://www.zhihu.com/login/phone_num 发送的表单是 _xsrf: passwo ...
- 開始:触摸MySQL
学习MySQL.少不了安装一个MySQL数据库,安装想必非常easy,事实上也是.我下载了一个MySQL5.7.百度了一下安装步骤,就成功安装了.相对于Oracle来说要简单不少. 买了两本书,看了& ...
- 看看android基础知识,谁帮我作答
无论怎么着,了解一点android的基本知识还是有必要的,就当开阔一些自己的眼界吧. .. . android的四大功能组件是_activity_,_service_,_BroadcastReceiv ...