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 ...
随机推荐
- visual core 运行 .net core bug处理
launch: program 'launch: launch.json must be configured. Change 'program' to the path to the executa ...
- codechef [snackdown2017 Onsite Final] Fusing Weapons
传送门 题目描述 大厨最近迷上了一款勇者斗恶龙的游戏. 游戏每局开始前,会有 N 件武器摆成一圈.每件武器有一个整数的等级.大厨可以选择两件 相邻的等级相同(不妨设同为 A 级)的武器,将它们合成.这 ...
- Codeforces Round #300(A.【字符串,多方法】,B.【思维题】,C.【贪心,数学】)
A. Cutting Banner time limit per test:2 seconds memory limit per test:256 megabytes input:standard i ...
- Codeforces Round #416(Div. 2)-811A.。。。 811B.。。。 811C.dp。。。不会
CodeForces - 811A A. Vladik and Courtesy time limit per test 2 seconds memory limit per test 256 meg ...
- 2017ICPC/广西邀请赛1005(水)HDU6186
CS Course Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- hdu_2669 Romantic(扩展欧几里得)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2669 Romantic Time Limit: 2000/1000 MS (Java/Others) ...
- Sublime Text 3.0版本的傻瓜式汉化步骤
Sublime text 3是非常好的文本编辑器,在试用过N款文本编辑器(Notepad.Notepad++.Notepad2.Programmer's notepad.EditPlus,Vim, T ...
- JAVA经典算法面试40题及答案
现在是3月份,也是每年开年企业公司招聘的高峰期,同时有许多的朋友也出来找工作.现在的招聘他们有时会给你出一套面试题或者智力测试题,也有的直接让你上机操作,写一段程序.算法的计算不乏出现,基于这个原因我 ...
- 番外篇--Moddule Zero启动模板
1.3 ABPZero - 启动模板 1.3.1 简介 使用ABP和moudle-zero开始一个新项目的最简单的方式是在模板页创建模板.记住要勾选 Include module zero. 在创建并 ...
- Spark应用_PageView_UserView_HotChannel
Spark应用_PageView_UserView_HotChannel 一.PV 对某一个页面的访问量,在页面中进行刷新一次就是一次pv PV {p1, (u1,u2,u3,u1,u2,u4-)} ...