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=" ...
随机推荐
- 老调重弹--面向对象设计原则--GRASP设计原则
GRASP概述 GRASP,全称General Responsibility Assignment Software Patterns,译为”通用职责分配软件原则“,包含以下原则和模式 控制器(Con ...
- TableLayout中怎么填充相同的布局
在Android界面xml文件中可以导入另一个xml文件,就能实现一个功能就是重复利用相同的xml布局 有两种方法进行处理: include引入 定义一个布局Tab_flag.xml <?xml ...
- 谈谈Oracle dba_free_space
谈谈Oracle dba_free_space 博客分类: ORACLE管理 OracleSQLC#C++C 顾名思义,dba_free_space指的是Oracle还有多少表空间剩余空间,其视图结 ...
- 12个很少被人知道的CSS事实
之前没有认真的研究过,padding-bottom的值如果是百分比,那么它的实际值是根据父类的宽度来调整的.我还以为是根据这个元素的本身的宽度来定义呢?汗..padding-top/padding-l ...
- ajax的get请求
get和post是http请求方法最主要的两种方式. get: 先实现一个简单的get请求 index.html <!DOCTYPE html> <html lang="e ...
- Smarty注释代码
所有的smarty模板标签都被加上了定界符. 默认情况下是 { 和},但它们是可被改变的. 例如,我们假定你在使用默认定界符. 在smarty里,所有定界符以外的内容都是静态输出的,或者称之为不可改变 ...
- jquery简单异步读取xml文件
$.ajax({ url: '../XmlFiles/Sm.xml', async: true, cache: false, ...
- 微软 PowerShell Script Explorer
微软 PowerShell Script Explorer 满血复活,正式发布 一年前的今天,微软在其Windows PowerShell官方博客声明中止 ‘Script Explorer’ 应用程序 ...
- HttpTest4Net
HttpTest4Net HttpTest4Net是一款基于C#实现的和HTTP压力测试工具,通过工具可以简单地对HTTP服务进行一个压力测试.虽然VS.NET也集成了压力测试项目,但由于VS自身占用 ...
- C#里CheckListBox的全选
for (int i = 0; i < chkLSelect.Items.Count; i++) { if (chkCheck.Checked ...