代码如下:

<!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. 4x4矩阵键盘 扫描程序

    一:不排除第四位异常处理 uchar JuzhenkeyScan() { // P3=0xfe; // temp=P3; // while(temp!=0xfe) // { // temp=P3; / ...

  2. erlang中的原子(atom)内部实现[转]

    转自: http://www.kongqingquan.com/archives/208#more-208 Erlang中的atom由通用hash表实现,虚拟机中atom最终的用数值表示,对应表中的下 ...

  3. 《Cracking the Coding Interview》——第11章：排序和搜索——题目3

    2014-03-21 20:55 题目:给定一个旋转过的升序排序好的数组,不知道旋转了几位.找出其中是否存在某一个值. 解法1:如果数组的元素都不重复,那么我的解法是先找出旋转的偏移量,然后进行带偏移 ...

  4. 【UVA10655】 Contemplation! Algebra

    题目 给定 \(p = a + b\) 和 \(q = ab\) 和 \(n\),求 \(a ^ n + b ^ n\). $0\le n\lt 2^{63} $ 分析 大水题. 先考虑 \(n\) ...

  5. CSS UNIT 详解以及最佳实践

    分类 ■    绝对长度(Absolute units):cm,mm,in,pt,pc 绝对单位之间的换算:1in = 2.54cm=25.4mm=72pt=6pc 绝对长度在css中的表现和其他地方 ...

  6. springboot注解使用，分页sql

    https://blog.csdn.net/KingBoyWorld/article/details/78948304

  7. 一个初学者的辛酸路程-依旧Django

    回顾: 1.Django的请求声明周期?   请求过来,先到URL,URL这里写了一大堆路由关系映射,如果匹配成功,执行对应的函数,或者执行类里面对应的方法,FBV和CBV,本质上返回的内容都是字符串 ...

  8. 孤荷凌寒自学python第六十五天学习mongoDB的基本操作并进行简单封装4

    孤荷凌寒自学python第六十五天学习mongoDB的基本操作并进行简单封装4 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第十一天. 今天继续学习mongoDB的简单操作 ...

  9. Python 黑魔法（持续收录）

    Python 黑魔法(持续收录) zip 对矩阵进行转置 a = [[1, 2, 3], [4, 5, 6]] print(list(map(list, zip(*a)))) zip 反转字典 a = ...

  10. 爬虫：Scrapy15 - 调试（Debugging）Spiders

    考虑下面的 spider: import scrapy from myproject.items import MyItem class MySpider(scrapy.Spider): name = ...