jQuery 之玩转 checkbox
<!DOCTYPE html>
<html> <head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src='http:cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
</head> <body>
<form>
<input type="checkbox" class="all"> 全选
<input type="checkbox" class="reverse"> 反选
<input type="checkbox" value="1" class="sub"> 1
<input type="checkbox" value="2" class="sub"> 2
<input type="checkbox" value="3" class="sub"> 3
<input type="checkbox" value="4" class="sub"> 4 <input type="button" value="click">
<input type="reset">
</form>
<script type="text/javascript">
$(function() {
$('.all').on('click', function(e) {
var isChecked = $(this).prop("checked");
$(".sub").prop("checked", isChecked);
}) $('.reverse').on('click', function(e) {
$(".sub").each(function(index, ele) {
var checked = $(ele).is(':checked') ? '' : 'checked'
$(ele).prop("checked", checked);
})
}) $('.sub').on('click', function(e) {
var checked = ($('.sub').length == $('.sub:checked').length ? 'checked' : '')
$('.all').prop('checked', checked)
}) $("input[type='button']").bind('click',function(){
var obj = $('.sub').map(function(index,ele){
return $(ele).val()
})
var arr = Array.prototype.slice.call(obj)
alert(JSON.stringify(arr))
})
})
</script>
</body> </html>
jQuery 之玩转 checkbox的更多相关文章
- jquery数组之存放checkbox全选值示例代码
使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: <input type="checkbox" id=&q ...
- jQuery 操作 input 之 checkbox
jQuery 操作 input 之 checkbox 一片 HTML 清单: <input type="checkbox" name="hobby" va ...
- JQuery 多选按钮checkbox
JQuery 多选按钮checkbox 在需要全选和选择部分的时候我们就需要多选在这里主要介绍了具体的实现 JQuery $(function () { //全选或全不选 $("#allbo ...
- jquery选中radio或checkbox的正确姿势
jquery选中radio或checkbox的正确姿势 Intro 前几天突然遇到一个问题,没有任何征兆的..,jquery 选中radio button单选框时,一直没有办法选中,后来查了许多资料, ...
- jquery的radio和checkbox的标签的操作集合
jquery的radio和checkbox的标签的操作集合: $("input[name='radio_name'][checked]").val(); //选择被选中Radio的 ...
- jquery选择器玩得不6啊，只能慢慢写判断了，唉..........................
jquery选择器玩得不6啊,只能慢慢写判断了,唉..........................
- JQuery 实现多个checkbox 只选中一个
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- [转]jQuery操作radio、checkbox、select 集合.
1.radio:单选框 html代码 <input type="radio" name="radio" id="radio1" val ...
- 《jQuery判断radio、checkbox、select 是否选中和设置选中问题以及获取选中值》总结
<form> <input type="radio" name="gender" id="man" value=" ...
随机推荐
- 代码审查 (Google牛人谈Code Review)
代码审查 (Google牛人谈Code Review) 在上一篇博客里我暗示自己将不在为Google工作. 我还没有决定好去哪儿-有几个非常不错的工作机会让我选择.鉴于这段时间内我不受雇于任何公司,我 ...
- Javascript Array API
JS数组对象提供了很多API方法,由于前段时间要用到某一些方法,但是突然一时又想不起来该怎么用了,上网找有很多资料都不全,所以就自己整理了一篇,完全是自己写的的JS,只是复制到这里来了 ,要用到的朋友 ...
- Javascript多线程引擎(十)---Web服务器
Javascript多线程引擎(十)---Web服务器 经过一天的努力, 引擎可以支持web服务的功能了并且支持UTF-8的编码, 具有对HTTP参数的解析,状态码的配置, 响应报文的输出等. 提供 ...
- 树莓派学习笔记 1 -- 硬件的需求以及raspbian系统的安装
树莓派(Raspberry Pi) -- 基于Linux系统的大小只有信用卡大小的卡片式机器. 按照发明者的想法,他是想降低学习程序开发的成本而设计制作的这款产品.你可以理解为一个简陋版的电脑.树 ...
- VS2013全攻略(安装，技巧，快捷键，插件）！
工欲善其事,必先利其器.VS2013全攻略(安装,技巧,快捷键,插件)! 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥>承蒙大家喜爱和编辑推荐,在此 ...
- oracle存储过程代码覆盖率统计工具
目前针对于高级语言如C++,JAVA,C#等工程都有相关的代码覆盖率统计工具,但是对于oracle存储过程或者数据库sql等方面的项目,代码覆盖率统计和扫描工具相对较少. 因此针对这种情况,设计了代码 ...
- 使用with ties查询并列的数据
select top 1 with ties name,stuId,sex,score from stuInfo order by score desc
- Python：Module Install Issues
Python里的Module安装过程总有一些奇怪的坑,在此整理一下,以供再遇到此类问题参看 (当然如果这篇文章有人看的话,希望能对你有所帮助~) 目前碰到的主要是以下几种: 0.使用PyCharm 1 ...
- NoSQL发展简史、粗略分类及选择
这里对近来看的部分NoSQL资料做一个汇总记录,主要包括简史.粗略分类及数据库选择的考虑事项.NoSQL常见的解释是“non-relational”,有时也称作Not Only SQL. 1. ...
- [转]Getting a Packet Trace
src:https://developer.apple.com/library/mac/qa/qa1176/_index.html Technical Q&A QA1176 Getting a ...