代码如下:

<!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. 深度CNN

    [具体参考可以看这里(https://cloud.tencent.com/developer/article/1369425)

  2. C++基础 const

    1. C中的const C中const变量只是只读变量,有自己存储空间.可能被存放在 栈.堆.数据段,所以可以修改. 2. C++中const 可能分配空间,也可能不分配空间. 当 const 为全局 ...

  3. dijkstra算法与优先队列

    这是鄙人的第一篇技术博客,作为算法小菜鸟外加轻度写作障碍者,写技术博客也算是对自己的一种挑战和鞭策吧~ 言归正传,什么是dijkstra算法呢? -dijkstra算法是一种解决最短路径问题的简单有效 ...

  4. Android开发——事件分发机制详解

    0. 前言   转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52566965 深入学习事件分发机制,是为了解决在Android开发中 ...

  5. FCS校验 C语言简单实现

    static uint8 calcFCS(uint8 *pBuf, uint8 len){  uint8 rtrn = 0;  while (len--)  {    rtrn ^= *pBuf++; ...

  6. Android 布局跟着NAVIGATION_BAR 重新布局

    要想让自己的布局跟着NAVIGATION_BAR 的变化重新布局,就不要设置 SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION. 这个FLAG. 这个flag 设置之后,你的 ...

  7. 跟着学！教你开发第一个Java程序

    今天我们的目标是开发人生中的第一个Java程序,虽然可能会很简单,但是这小小的一步却是跨入IT行业的一大步!下面我们来一起来仔细的了解开发的流程. 准备工作 1,作为一名准程序猿自备一台电脑那是必不可 ...

  8. 【Spiral Matrix】cpp

    题目: Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spira ...

  9. Java基础-3类和对象声明与创建

    一).在1和2中有粗略介绍过类和对象的概念,在这里简单回顾一下: 对象与类:一个实际或者虚拟的物体,这个物体既是我们的对象,这个物体呢又是属于一个分类,如动物类,人类 二).创建对象: 在创建对象的时 ...

  10. GLIBCXX3.4.21 not find

    在执行世界杯的二进制代码和安装keepaway中会遇到GLIBCXX3.4.21 not find的问题,其解决办法就是升级安装GCC. 一.首先查看当前gcc版本 $ strings /usr/li ...