jQuery对checkbox的各种操作

httpswww.cnblogs.comjunjieokp4107066.html

//注意：操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上（包含）建议用prop

//1、根据id获取checkbox
$("#cbCheckbox1");

//2、获取所有的checkbox
$("input[type='checkbox']");//or
$("input[name='cb']");

//3、获取所有选中的checkbox
$("input:checkbox:checked");//or
$("input:[type='checkbox']:checked");//or
$("input[type='checkbox']:checked");//or
$("input:[name='ck']:checked");

//4、获取checkbox值
//用.val()即可，比如：
$("#cbCheckbox1").val();

//5、获取多个选中的checkbox值
var vals = [];
$('input:checkbox:checked').each(function (index, item) {
vals.push($(this).val());
});

//6、判断checkbox是否选中（jquery 1.6以前版本用 $(this).attr("checked")）
$("#cbCheckbox1").click(function () {
if ($(this).prop("checked")) {
alert("选中");
} else {
alert("没有选中");
}
});

//7、设置checkbox为选中状态
$('input:checkbox').attr("checked", 'checked');//or
$('input:checkbox').attr("checked", true);

//8、设置checkbox为不选中状态
$('input:checkbox').attr("checked", '');//or
$('input:checkbox').attr("checked", false);

//9、设置checkbox为禁用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
$("input[type='checkbox']").attr("disabled", "disabled");//or
$("input[type='checkbox']").attr("disabled", true);//or
$("input[type='checkbox']").prop("disabled", true);//or
$("input[type='checkbox']").prop("disabled", "disabled");

//10、设置checkbox为启用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
$("input[type='checkbox']").removeAttr("disabled");//or
$("input[type='checkbox']").attr("disabled", false);//or
$("input[type='checkbox']").prop("disabled", "");//or
$("input[type='checkbox']").prop("disabled", false);

----------------------------------------------------------------------
https://www.cnblogs.com/jiangyy/p/3809507.html
$("[name='checkbox']").attr("checked",'true');//全选

$("[name='checkbox']").removeAttr("checked");//取消全选

$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

//获取选择的值

var str="";

$("[name='checkbox'][checked]").each(function(){

　　 str+=$(this).val()+""r"n";

　　 //alert($(this).val());

})

js判断checkbox的选中状态：var isChecked = document.getElementById("share_all").checked；

jquery判断checkbox的选中状态：var isChecked = $("#checkbox_id").attr("checked")=="checked";

初始化绑定按钮的单击事件：

$(function(){

　　$("#btn1").click(function(){

　　　　$("[name='checkbox']").attr("checked",'true');

　　})

});

--------------------------------------------------
jQuery checkbox bug（第一次能选中生效，第二次失效）

<!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>无标题文档</title>
<script src="jquery.js"></script>
<style type="text/css">
#apDiv1 {
   position: absolute;
   width: 229px;
   height: 54px;
   z-index: 1;
   left: 89px;
   top: 19px;
   background-color: #666666;
}
#apDiv2 {
   position: absolute;
   width: 200px;
   height: 115px;
   z-index: 1;
   left: 331px;
   top: 11px;
   background-color: #CCCCCC;
}
</style>
</head>

</div>
<div id="apDiv2">
<input type="button" name="button" id="button" value="选择" onclick="f1()" />
<input type="button" name="button" id="button" value="取消" onclick="f2()" />
</div>

jQuery对checkbox的各种操作

猜你喜欢