jQuery应用操作之---复选框
1、示例1:
<form>
你最爱好的运动是?
<input type="checkbox" id="CheckedAll"/>全选<br/>
<input type="checkbox" id="CheckedNo"/>全不选<br/>
<input type="checkbox" id="CheckedRev"/>反选<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<input type="button" id="send" value="提交"/>
</form>
全选:
$("#checkAll").click(function(){
$.("[name=items]: checkbox").attr("checked",true);
})
全不选:
$("#checkAll").click(function(){
$.("[name=items]: checkbox").attr("checked",false);
})
反选:
$("#checkRev").click(function(){
$.("[name=items]: checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
})
})
JS原生的DOM方法比创建jQuery对象更为有效、简洁,简化后代码如下:
$("#checkRev").click(function(){
$.("[name=items]: checkbox").each(function(){
this.checked=!this.checked;
})
})
2、示例2:
<form>
你最爱好的运动是?
<input type="checkbox" id="CheckedAll"/>全选/全不选<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<input type="button" id="send" value="提交"/>
</form>
单击id为"CheckedAll"复选框后,复选框组被选中,当复选框组中有一个或者更多没有被选中时,则需要取消id为"CheckedAll"的选中状态,有如下方法实现:
a)设置一个全选中/未全选中标志位,根据标志位设置"CheckedAll"复选框选中状态
$("[name=items]:checkbox").click(function(){
var flag = true;
$("[name=items]:checkbox").each(function(){
if(!this.checked){
flag = false;
}
});
$("#CheckAll").attr("checked",flag);
})
b) 判断复选框的总数是否与选中的复选框数量相等
$("[name=items]:checkbox").click(function(){
var $temp = $("[name=items]:checkbox");
$("#CheckAll").attr("checked",$temp.length==$temp.filter(":checked").length);
})
jQuery应用操作之---复选框的更多相关文章
- jquery:获取checked复选框的问题
jquery:获取checked复选框的问题 功能描述:要完成一个全选的功能,但总是获取不到复选框的被选中的个数,究其原因,是Jquery中length和checked使用不当所造成的. // 获取所 ...
- js操作checkbox(复选框)的方法总结
收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...
- JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...
- jQuery+SpringMVC中的复选框选择与传值
一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked& ...
- jQuery实现checkbox(复选框)选中、全选反选代码
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- jquery处理checkbox(复选框)是否被选中
现在如果一个复选框被选中,是用checked=true,checked="checked"也行 要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能 ...
- JQuery、js判断复选框是否选中状态
JQuery: var $isChecked = $("#id").is(":checked"); alert($isChecked); JS: var $id ...
- jQuery 获取 多个 复选框 和 javascript 对比
$('input[name="teams"]:checked').size() // 全选 $("#quanteam").bind("click&qu ...
- jquery、js判断复选框是否选中
js: if (document.getElementById("checkboxID").checked) { alert("checkobx is checked&q ...
随机推荐
- 部署java项目到阿里云服务器(centos7版本)
一.搭建环境 1.搭建java环境(64位) 一.准备压缩包,rpm包或者tar包,将其上传到阿里云对应的文件夹(我用的工具是WinSCP,百度一下就有下载资源) 二.若是rpm包,可以通过 rpm ...
- [ZOJ3213] Beautiful Meadow
插头DP...网格图,有障碍,格子上有权值,求总权值最大的简单路径. 因为路径的起始点不确定..所以多开一维表示当前已经有多少个独立插头.. 只要不合并相同的联通块,并且已经用了2个独立插头,那就是一 ...
- BZOJ3930: [CQOI2015]选数
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3930 容斥原理. 令l=(L-1)/k,r=R/k,这样找k的倍数就相当于找1的倍数. 设F[ ...
- 2017ecjtu-summer training #4 CodeForces 731C
C. Socks time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...
- flume1.8 Sinks类型介绍(三)
1. Flume Sinks 1.1 HDFS Sink 该sink把events写进Hadoop分布式文件系统(HDFS).它目前支持创建文本和序列文件.它支持在两种文件类型压缩.文件可以基于数据的 ...
- 慕课网-前端JavaScrpt基础面试技巧-学习笔记
章节目录: JS基础知识(上)--讲解 JS 基础语法相关的面试题,分析原理以及解答方法.这一章节讲解了基础知识的第一部分:变量的类型和计算.以及JS "三座大山" -- 原型.作 ...
- 将本地项目或代码上传到别人GitHub(码云)的远程分支上
今天碰到了这样一个问题,折腾了半天,就是将自己本地代码上传到人家的远程分支上. 首先要做的就是先将人家的项目克隆到本地:git clone + 项目地址 然后进入项目目录:cd + 已克隆好的项目目录 ...
- Document类型知识大全
Document类型 1.文档的子节点 Document类型可以表示HTML页面或者其他基于XML的文档.不过,最常见的应用还是作为HTMLDocument实例的document对象.通过这个文档对 ...
- webpack优化之code splitting
作为当前风头正盛的打包工具,webpack风靡前端界.确实作为引领了一个时代的打包工具,很多方面都带来了颠覆性的改进,让我们更加的感受到自动化的快感.不过最为大家诟病的一点就是用起来太难了. 要想愉快 ...
- protobuf java基础
1:定义proto文件: 以一个地址薄为例,从建立一个.proto文件开始,为需要序列化的数据接口加入一个message属性,在message里面,为每一个字段指定名称和类型(算是IDL吧),如下 ...