Jquery学习笔记（4）--checkbox全选反选
可能有浏览器兼容性，注意html里的checked是一个属性，存在就默认选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='jquery.js'></script>
</head>
<body>
<p><input type="checkbox">篮球</p>
<p><input type="checkbox">唱歌</p>
<p><input type="checkbox">旅游</p>
<p><input type="checkbox">美食</p>
<input type="button" value="全选" name="all">
<input type="button" value="全不选" name="none">
<input type="button" value="反选" name="reverse"> </body>
<script>
//这个地方在谷歌浏览器有问题，点全不选后再点全选没有效果，ie里面没问题。
//checked在html里面是一个属性，不管checked=''里面是啥，都会默认选中。
$('[name=all]').click(function(){
$('p input').attr({'checked':true});
});
$('[name=none]').click(function(){
$('p input').removeAttr('checked',false);
});
$('[name=reverse]').click(function(){
$('p input').each(function(){
//这里使用js的this对象，checked是一个属性
this.checked = !this.checked;
});
});
</script>
</html>
修改后，chrome也可以用了：
<script>
//这个地方在谷歌浏览器有问题，点全不选后再点全选没有效果，ie里面没问题。
//checked在html里面是一个属性，不管checked=''里面是啥，都会默认选中。
$('[name=all]').click(function(){
//jqery负责遍历，js的this改变checked的true和false
$('p input').each(function(){
this.checked = true;
});
});
$('[name=none]').click(function(){
//同上
$('p input').each(function(){
this.checked = false;
}); });
$('[name=reverse]').click(function(){
$('p input').each(function(){
//这里使用js的this对象，checked是一个属性
// alert(!this.checked);
this.checked = !this.checked;
});
});
</script>
</html>
再次改进，使用prop()方法，专门修改固有属性，比如checked：
<script>
$('[name=all]').click(function(){
$(':checkbox').prop('checked',true);
});
$('[name=none]').click(function(){
$(':checkbox').prop('checked',false);
});
$('[name=anti]').click(function(){
$(':checkbox').each(function(){
var isTrue = !$(this).prop('checked');
// alert(isTrue);
$(this).prop('checked',isTrue);
});
});
</script>
Jquery学习笔记（4）--checkbox全选反选的更多相关文章
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- jquery数组之存放checkbox全选值示例代码
使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: <input type="checkbox" id=&q ...
- 表单javascript checkbox全选 反选 全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理
近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...
- jQuery使用prop设置checkbox全选、反选
$(function(){ var checkbox = $("input[type='checkbox']"); //全选 $('#select-all' ...
- jQuery实现checkbox全选反选及删除等操作
1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...
- JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符
练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1. && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...
- jquery checkbox 全选反选代码只能执行一遍，第二次就失败
遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...
- checkbox 全选反选实现全代码
//跳转到指定action function validateForm(url){ if($("#form").form('validate')){ var x=document. ...
随机推荐
- 怎样在Ubuntu手机应用中得到全部的环境变量值
我们在先前的例程中已经通过一些方法得到我们应用的一些环境变量值.这些值有的很实用.比方我们能够得到我们应用所仅仅能訪问的文件夹.在今天的例程中,我们来展示一种方法能够得到应用全部的环境变量.在我们的实 ...
- （转）Linux下内存映射文件的用法简介
简介: 内存映射文件与虚拟内存有些类似,通过内存映射文件可以保留一个地址空间的区域,同时将物理存储器提交给此区域,只是内存文件映射的物理存储器来自一个已经存在于磁盘上的文件,而非系统的页文件,而且在对 ...
- 【DataStrcutre】Introduction and description of Binary Trees
[Definitions] Here is the recursive definition of a binary tree: A binary tree is either the empty s ...
- Android Studio 项目中集成百度地图SDK报Native method not found: com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create:()I错误
Android Studio 项目中集成百度地图SDK报以下错误: java.lang.UnsatisfiedLinkError: Native method not found: com.baidu ...
- SVN 常见命令
一.什么是SVN SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS. 二.SVN的下载安装 下载地址:http ...
- vue 仿ele 开发流程
技术栈: vue2 vuex vue-router axios webpack eslint better-scroll 1.安装插件 npm install vue-resource babel-r ...
- ZK框架笔记2、ZK框架安装、相关类库、web及zk配置
1.先去ZK官网注册一个账号 2.在MyEclipse菜单栏中Help----Eclipse Marketplace中搜索ZK Studio,点击install安装即可 3.相关类库 ...
- SQLiteOpenHelper 源码
package com.tongyan.common.db; /** * Copyright (C) 2007 The Android Open Source Project * * Licensed ...
- eclipse下的tomcat内存设置大小（转）
步骤: 1.点击Run 2.选择Run Configurations, 3.系统弹出设置tomcat配置页面,在Argument中末尾添加参数中的VM arguments中追加: -Xms256M - ...
- 新建 jsp异常，The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
新项目,新建jsp页面的时候报异常: Multiple annotations found at this line: - The superclass "javax.servlet.htt ...