代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<mce:style><!--

--></mce:style><style mce_bogus="1">

</style>

<title>JS获取复选框被选中的值</title>

</head>

<body>

<input type="checkbox" name="test" value="0" />0

<input type="checkbox" name="test" value="1" />1

<input type="checkbox" name="test" value="2" />2

<input type="checkbox" name="test" value="3" />3

<input type="checkbox" name="test" value="4" />4

<input type="checkbox" name="test" value="5" />5

<input type="checkbox" name="test" value="6" />6

<input type="checkbox" name="test" value="7" />7

<input type="button" onclick="chk()" value="提 交" />

</body>

</html

JS代码

function chk(){

var obj=document.getElementsByName('test'); //选择所有name="'test'"的对象，返回数组

//取到对象数组后，我们来循环检测它是不是被选中

var s='';

for(var i=0; i<obj.length; i++){

if(obj[i].checked) s+=obj[i].value+','; //如果选中，将value添加到变量s中

}

//那么现在来检测s的值就知道选中的复选框的值了

alert(s==''?'你还没有选择任何内容！':s);

}

function jqchk(){ //jquery获取复选框值

var chk_value =[];

$('input[name="test"]:checked').each(function(){

chk_value.push($(this).val());

});

alert(chk_value.length==0 ?'你还没有选择任何内容！':chk_value);

}

对checkbox的其他几个操作

1. 全选
2. 取消全选
3. 选中所有奇数
4. 反选
5. 获得选中的所有值

$("document").ready(function(){

$("#btn1").click(function(){

$("[name='checkbox']").attr("checked",'true');//全选

})

$("#btn2").click(function(){

$("[name='checkbox']").removeAttr("checked");//取消全选

})

$("#btn3").click(function(){

$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

})

$("#btn4").click(function(){

$("[name='checkbox']").each(function(){//反选

if($(this).attr("checked")){

$(this).removeAttr("checked");

}

else{

$(this).attr("checked",'true');

}

})

})

$("#btn5").click(function(){//输出选中的值

var str="";

$("[name='checkbox'][checked]").each(function(){

str+=$(this).val()+"/r/n";

//alert($(this).val());

})

alert(str);

})

})

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>louis-blog >> jQuery 对checkbox的操作</title>

<mce:script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js" mce_src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></mce:script>

<SCRIPT LANGUAGE="JavaScript">

<!--

$("document").ready(function(){

$("#btn1").click(function(){

$("[name='checkbox']").attr("checked",'true');//全选

})

$("#btn2").click(function(){

$("[name='checkbox']").removeAttr("checked");//取消全选

})

$("#btn3").click(function(){

$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

})

$("#btn4").click(function(){

$("[name='checkbox']").each(function(){//反选

if($(this).attr("checked")){

$(this).removeAttr("checked");

}

else{

$(this).attr("checked",'true');

}

})

})

$("#btn5").click(function(){//输出选中的值

var str="";

$("[name='checkbox'][checked]").each(function(){

str+=$(this).val()+"/r/n";

//alert($(this).val());

})

alert(str);

})

})

-->

</SCRIPT>

</HEAD>

<body style="text-align:center;margin: 0 auto;font-size: 12px;" mce_style="text-align:center;margin: 0 auto;font-size: 12px;">

<div style="border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;">

<form name="form1" method="post" action="">

<input type="button" id="btn1" value="全选">

<input type="button" id="btn2" value="取消全选">

<input type="button" id="btn3" value="选中所有奇数">

<input type="button" id="btn4" value="反选">

<input type="button" id="btn5" value="获得选中的所有值">

<br /><br />

<input type="checkbox" name="checkbox" value="checkbox1">

checkbox1

<input type="checkbox" name="checkbox" value="checkbox2">

checkbox2

<input type="checkbox" name="checkbox" value="checkbox3">

checkbox3

<input type="checkbox" name="checkbox" value="checkbox4">

checkbox4

<input type="checkbox" name="checkbox" value="checkbox5">

checkbox5

<input type="checkbox" name="checkbox" value="checkbox6">

checkbox6

</form>

</div>

</body>

</HTML>

JS操作checkBox的更多相关文章

  1. js操作checkbox(复选框)的方法总结

    收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...

  2. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  3. JS 操作 checkbox（cc角色管理等）

    1.获取选中的权限的个数 var size=$("input[name='privileges']:checked").size();

  4. 实现table中checkbox复选框、以及判断checked是否被选中、js操作checkedbox选中

    上图是实现效果. 下面贴代码 表的第一行也就是<th>中的代码,onclick事件是实现全选或者全不选效果. <th> <input id="allboxs&q ...

  5. 【js】操作checkbox radio 的操作总结

    摘要 总是忘记checkbox radio 的具体操作,总是坑自己,总结下记下来 html <input type="checkbox" value="1" ...

  6. 第十四课：js操作节点的插入，复制，移除

    节点插入 appendChild方法,insertBefore方法是常用的两个节点插入方法,具体实现,请看js高级程序设计,或者自行百度. 这里提一下面试时经常会问到的问题,插入多个节点时,你是怎么插 ...

  7. js操作cookie，实现登录密码保存 [转]

    转自:http://blog.csdn.net/zyujie/article/details/8727828 ( 谢谢博主了) js操作cookie,实现登录密码保存.cookie的存放方式是以键值对 ...

  8. jQuery操作CheckBox的方法(选中,取消,取值)

    jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...

  9. jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

随机推荐

  1. 学习python第十一天，函数3 函数的序列化和反序列化

    我们把变量从内存中变成可存储或传输的过程称之为序列化,序列化之后,就可以把序列化后的内容写入磁盘,或者通过网络传输到别的机器上. 反过来,把变量内容从序列化的对象重新读到内存里称之为反序列化,即unp ...

  2. [Bzoj1037][ZJOI2008]生日聚会（DP）

    Description 题目链接 Solution 这题状态比较难想, \(dp[i][j][g][h]\)表示强i个人有j个男生,在某个区间男生最多比女生多g人,女生最多比男生多h人的方案数,然后D ...

  3. 笔记-python-多线程-深入-1

    笔记-python-多线程-深入-1 1.      线程池 1.1.    线程池:控制同时存在的线程数量 threading没有线程池,只能自己控制线程数量. 基本有两种方式: 每间隔一段时间创建 ...

  4. adnroid 打包问题 :compileReleaseJavaWithJavac

    今天打包的时候,由于着急.改了些本地的变化就assembleRelease. 然后就报错: compileReleaseJavaWithJavac 后来网上乱找,.... 之后我想到先跑一下,果然是因 ...

  5. Webpack标准配置

    let htmlWebpckPlugin= require('html-webpack-plugin');//该组件能将src下面提定的html文件与打包后在js文件打包在一起module.expor ...

  6. Java 基本数据类型总结一

    Java基本数据类型总结一 基本类型,或者叫做内置类型,是JAVA中不同于类的特殊类型.它们是我们编程中使用最频繁的类型.java是一种强类型语言,第一次申明变量必须说明数据类型,第一次变量赋值称为变 ...

  7. 《Cracking the Coding Interview》——第3章：栈和队列——题目5

    2014-03-18 05:33 题目:用两个栈来实现一个队列. 解法:栈是反的,队列是正的,反了再反就正过来了.所以,请看代码.操作中时间复杂度有O(1)的,有O(n)的,但均摊下来时间符合O(1) ...

  8. Python全栈（一）编程语言介绍

    一.编程语言介绍 程序是计算机能读懂的语言,是人和计算机沟通的方式. 计算机无法理解符号,只能理解0,1的二进制. 计算机内的运行状态就像灯泡的开关一样来表示各庄状态,两个灯泡能表示4种状态,无数的灯 ...

  9. [转载]GCC 编译使用动态链接库和静态链接库--及先后顺序----及环境变量设置总结

    来自http://blog.csdn.net/benpaobagzb/article/details/51364005 GCC 编译使用动态链接库和静态链接库 1 库的分类 根据链接时期的不同,库又有 ...

  10. Android记事本开发03

    昨天: 生成签名文件及导出apk 遇到的问题: 无. 今天: activity和intent基础