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 ...
随机推荐
- 《Linux命令行与shell脚本编程大全》第十八章 图形化桌面环境中的脚本编程
18.1 创建文本菜单 直接上例子吧: 1 #!/bin/bash 2 function menu 3 { 4 clear 5 echo 6 ...
- Javascript-数值运算 保留小数点位数,并对最后一位小数各种取整方法
今天遇到Javascript数值运算的坑,说到底,还是用得少啊.得多用多敲代码多遇坑. 先介绍以下三个Javascript number取整运算方法. Math.floor() 对一个数退一取整 例: ...
- php生成唯一id/唯一标识符/唯一订单号
/** * php 生成唯一id * https://blog.csdn.net/hzqghost/article/details/18914681 */ function guid($factor= ...
- 反射---hasattr、getattr、setattr、delattr
class Foo: f = "类的静态变量" def __init__(self,name,age): self.name = name self.age = age def s ...
- UWP 保存Image的图片到本地文件
上一篇说显示一张图片到Image控件,比较简单. 那个假设我Image控件有图片了,想保存到本地,这个就要花心思了,不过也不复杂的... var rtb = new RenderTargetBitma ...
- 在学java继承中
看到一片个人认为的好博客,http://www.cnblogs.com/dolphin0520/p/3803432.html ;这一节看的比较慢,加油,就是干: 分类不好意思分到Java中,嘿嘿还 ...
- Python的控制语句
1. 控制语句 控制语句是用来改变程序执行的顺序.程序利用控制语句有条件地执行语句,循环地执行语句或者跳转到程序中的其他部分执行语句. Python支持三种不同的控制语句:if,for和while, ...
- python 3.6 urllib库实现天气爬取、邮件定时给妹子发送天气
#由于每天早上要和妹子说早安,于是做个定时任务,每天早上自动爬取天气,发送天气问好邮件##涉及模块:#(1)定时任务:windows的定时任务# 配置教程链接:http://b ...
- reverse函数实现指定页面跳转
需求: 在views中返回的url需要返回到具体的某一篇文章的评论列表 return redirect(reverse('cms_comment_manage',args=(number,))) dj ...
- javascript 正則表達式补充
定义 JavaScript种正則表達式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 var reg=new RegExp('<%[^%>]+%&g ...