jQuery對checkbox的各種操作
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>
<body>
<div id="apDiv1">
<input name="checkbox" type="checkbox" id="checkbox1" checked="checked" />
<label for="checkbox">1123</label>
</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>
<script type="text/javascript">
function f1() {
$("#checkbox1").prop("checked","checked");//全選
};
function f2() {
$("#checkbox1").prop("checked","");//全選
};
</script>
</body>
</html>