Tag: checkbox

jQuery获取checkbox值的方法

没有评论

2010 年 09 月 15 日 at 下午 6:19分类:jQuery

http://www.jb51.net/article/21581.htm

$(“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);
})
})

使用$(“[name='checkbox']:checked”)这种方法才可以正确取到radio/checkbox组的被选中的控件的集合

详细代码:
<!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=gb2312″ />
<title>louis-blog >> jQuery 对checkbox的操作</title>
<script type=’text/javascript’ src=”http://img.jb51.net/jslib/jquery/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 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>

jQuery中取得checkbox组中被选中的值:
var selectText;
$(“:checkbox[name=yourcheckname]:checked”).each(function(){
selectText+=$(this).val()+’,';
})