都知道 在html 如果一个复选框被选中 是 checked="checked"。
但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked
所以很多朋友判断 if($("#id").attr("checked")=="true") 这个是错误的，其实应该是 if($("#id").attr("checked")==true)
例子里面包括了一下几个功能。
<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="获得选中的所有值">
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT LANGUAGE="JavaScript" src="http://www.cnjquery.com/demo/jquery.js"></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>
<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>
<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
<input type="checkbox" name="checkbox" value="checkbox7">
checkbox7
<input type="checkbox" name="checkbox" value="checkbox8">
checkbox8
</form>
以下是关于修改，判断只能修改一条记录(是iframe嵌套页面)
function selectcheckbox(){
var t=0;
var boxnum = document.frames["dzdaiframe"].document.getElementsByName('listForm.ids');
for (var i=0;i<boxnum.length;i++){
if(boxnum[i].checked){
id = boxnum[i].value;
t++;
}
}
if(t==0) {
alert("请至少选择一条记录");
return false;
}
else if(t>1){
alert("对不起，一次只能操作1条记录.");
return false;
}else{
return true;
}
}
$("#tldp").click(function(){
$("#dzdahdgi").hide();
$("#dzdaall").show();
$("#dzdaiframe").attr("src","${Context}/background/tldp!search?Entity.root.class=com.egf.qingbao.jzyp.entities.YpTldp&Entity.root.alias=o&o.zjhm.value=${zd.zdgzrysfzh}&Entity.forward=list&Entity.listStyle=tldp");
$("#adddzda").click(function(){
window.location.href="${Context}/background/tldp!addtldp?sfzh=${zd.zdgzrysfzh}&xm=${zd.zdgzryxm}";
});
$("#uppdzda").click(function(){
if(selectcheckbox())/********/
window.location.href="${Context}/background/tldp!upptldp?id="+id;
});
});
二，同上
<html> <head>
<title>
复选框全选、全不选、反选、必选一个
</title>
<meta http-equiv="content-type" content="text/html;charset=GBK"/>
<script language="javascript">
//表单验证
function check(){
var ids = document.getElementsByName("ids");
var flag = false ;
for(var i=0;i<ids.length;i++){
if(ids[i].checked){
flag = true ;
break ;
}
}
if(!flag){
alert("请最少选择一项！");
return false ;
}
}
//全选
function iselect(){ //其中函数字不能为select 其为JS保留字
var ids = document.getElementsByName("ids");
var all = document.getElementByIdx_x_x("all");
for(var i=0;i<ids.length;i++){
ids[i].checked=all.checked;
}
}
//全选
function selectAll(){
var ids = document.getElementsByName("ids");
for(var i=0;i<ids.length;i++){
ids[i].checked=true;
}
}
//全不
function selectNone(){
var ids = document.getElementsByName("ids");
for(var i=0;i<ids.length;i++){
ids[i].checked=false;
}
}
//反选
function selectInvert(){
var ids = document.getElementsByName("ids");
for(var i=0;i<ids.length;i++){
if(ids[i].checked)
ids[i].checked=false ;
else
ids[i].checked=true ;
}
}
</script>
</head>
<body>
<form action="#" onsubmit="return check();">
<table border="0">
<tr><td><input type="checkbox" id="all" onclick="iselect();"></td></tr>
<tr><td><input type="checkbox" name="ids">音乐</td></tr>
<tr><td><input type="checkbox" name="ids">短信</td></tr>
<tr><td><input type="checkbox" name="ids">图片</td></tr>
<tr><td><input type="checkbox" name="ids">电子书</td></tr>
<tr><td><input type="checkbox" name="ids">铃声</td></tr>
<tr><td><input type="checkbox" name="ids">漫画</td></tr>
<tr><td><input type="checkbox" name="ids">游戏</td></tr>
<tr><td><input type="checkbox" name="ids">杂志</td></tr>
<tr><td><input type="checkbox" name="ids">新闻</td></tr>
<tr>
<td>
<a href="#" onclick="selectAll();">全选</a>
<a href="#" onclick="selectNone();">全不</a>
<a href="#" onclick="selectInvert();">反选</a>
</td>
</tr>
<tr><td><input type="submit" value="提交"></td></tr>
</table>
</form>
</body>
</html>
function checkSubmit() {
var taskcontext = document.getElementById('taskcontext');
var chkids = document.getElementsByName("chkid");
var flag = false;
if(taskcontext.value==""){
alert("关注原因不能为空！");
return false;
}
for(var i=0;i<chkids.length;i++){
if(chkids[i].checked){
flag = true;
break;
}
}
if(!flag){
alert("请至少选择一个单位！");
return false;
}
}
checkbox技巧
1、获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();
2、 获取多个checkbox选中项
$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});
3、设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
4、设置最后一个checkbox为选中值
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
5、根据索引值设置任意一个checkbox为选中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
6、选中多个checkbox同时选中第1个和第2个的checkbox
$('input:radio').slice(0,2).attr('checked','true');
7、根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');
8、删除Value=1的checkbox
$("input:checkbox[value='1']").remove();
9、删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
10、遍历checkbox
$('input:checkbox').each(function (index, domEle) {
//写入代码
});
11、全部选中
$('input:checkbox').each(function() {
$(this).attr('checked', true);
});
12、全部取消选择
$('input:checkbox').each(function () {
$(this).attr('checked',false);
});
分享到：
相关推荐
jQuery如何判断checkbox（复选框）是否被选中
jquery点击checkbox复选框仿招聘人才网弹出工作地点 jquery点击checkbox复选框仿招聘人才网弹出工作地点 jquery点击checkbox复选框仿招聘人才网弹出工作地点
jQuery树形复选框插件,jQuery树形复选框插件,jQuery树形复选框插件,jQuery树形复选框插件
jquery 实现鼠标单击行时，改变行的背景颜色，选中checkbox复选框
Prototype与jQuery美化Checkbox复选框实例.zip
基于jQuery的CheckBox复选框代码，效果很酷哦
一行代码搞定layui数据表格的表头checkbox复选框隐藏问题。
jquery 复选框组件jquery 复选框组件jquery 复选框组件jquery 复选框组件jquery 复选框组件
对于jQuery自定义复选框checkbox和单选框Radiobox，我们已经有介绍过不少了，比如9款迷人样式的CSS3自定义Checkbox复选框和HTML5/CSS3开关按钮 立体3D按钮。今天要介绍的是一款基于jQuery的美化版复选框，它的特点是...
jQuery弹出框checkbox复选框多选代码，jQuery弹出框checkbox复选框多选代码
一款好看的jQuery自定义美化复选框checkbox样式代码，可以定义复选框的颜色和形状，让复选框风格不再像默认样式那样单调。
jquery 判断复选框是否选中以及如何选中的问题做一下总结。 进入正题，还是当页面有如下一组复选框的时候： <input type=checkbox name=fruit value=apple />苹果 <input type=checkbox name=fruit value...
jQuery实现复选框checkbox的全选与反选功能，不用多介绍了吧，以往都是基于纯js的实现比较多，这个是引入了jquery，或许更能满足现在的前端设计吧。
jQuery基于layui插件制作checkbox复选框选中代码，权限范围多选、单选、全选代码；checkbox父级子级结构，父级选中，子级全选，子级没有选中父级取消选中效果。
jquery实现 复选框 选中和不选中 美化复选框
这是一款使用js和css3制作的超酷checkbox复选框美化插件。该checkbox复选框美化插件没有使用图片，纯CSS制作，它可以通过拖动来进行复选框的多选，非常方便，美化效果也是一流的。
主要介绍了js与jQuery实现checkbox复选框全选/全不选的方法,结合实例较为详细的分析了JavaScript与jQuery针对checkbox复选框全选与反选的操作技巧,需要的朋友可以参考下
highchecktree是一款使用指定源数据生成带复选框的树形结构的jQuery插件。该树形结构插件对于在大数据的处理上性能十分出色。它使用懒加载的形式来提供性能，子节点会在点击时才去加载数据。
绚丽的复选框 jquery-checkbox 具体参见http://blog.csdn.net/evangel_z/article/details/8259200