代码如下:

<!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. graphviz使用

    官方网站:http://www.graphviz.org/ Graphviz (Graph Visualization Software) 是一个由AT&T实验室启动的开源工具包.DOT是一种 ...

  2. C++基础 inline 默认参数 函数占位参数 函数重载

    1. inline内联函数 内联函数用于替换宏, 实例: 其中宏和 ++ 连用有副作用. #include "iostream" using namespace std; #def ...

  3. POJ：1995-Raising Modulo Numbers（快速幂）

    Raising Modulo Numbers Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 9512 Accepted: 578 ...

  4. Aizu：0005-GCD and LCM

    GCD and LCM Time limit 1000 ms Memory limit 131072 kB Problem Description Write a program which comp ...

  5. JS实现禁用滑动条但滑动条不消失的效果

    //方法 //滑动条 // left: 37, up: 38, right: 39, down: 40, // spacebar: 32, pageup: 33, pagedown: 34, end: ...

  6. IDA 对 so 的动态调试

    将IDAPro根目录下dbgsrv 目录下的android_server(模拟器用android_x86_server,这里还是用真机好点)文件push 到安卓设备(比如/data/local/tmp ...

  7. 基于itchat定制聊天机器人

    #coding=utf8import requestsimport itchat #key自己到图灵注册一个 KEY = '************************************** ...

  8. Android面试收集录2 Broadcast Receiver详解

    1.Broadcast Receiver广播接收器简单介绍 1.1.定义 Broadcast Receiver(广播接收器),属于Android四大组件之一 在Android开发中,Broadcast ...

  9. videomon 环境搭建

    1.安装ACE-5.8.0.tar.bz2 tar -zxvf ACE-.tar.bz2 cd ACE_wrappers/mkdir buildcd build../configuremake &am ...

  10. 图解java面试

    图解Java面试题:基本语法 2017-02-07 14:34 出处:清屏网 人气:178 评论(0)   内容大纲.png &和&&的区别 &和&&的 ...