jquery對checkbox操作實例大全，包括對checkbox的全選、反選、全部選、取值、取頁面顯示值等功能，具體看下面jquery對checkbox操作實例代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title>全選全不選反選取值</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-1.4.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#selAll").click(function () { //":checked"匹配所有的復選框
$("#div1 :checkbox").attr("checked", true); //"#div1 :checked"之間必須有空格checked是設置選中狀態。如果為true則是選中fo否則false為不選中
});
$("#unselAll").click(function () {
$("#div1 :checkbox").attr("checked", false);
});
//理解用迭代原理each（function(){}）
$("#reverse").click(function () {
$("#div1 :checkbox").each(function () {
$(this).attr("checked",!$(this).attr("checked")); //!$(this).attr("checked")判斷復選框的狀態：如果選中則取反
});
});
$("#submit").click(function (){
var items= $("input:checkbox:checked");
if (items>0) {
alert("您選中了"+items.length+"個項目");
var checked=[];
$("input:checkbox:checked").val();
$("input:checkbox:checked").each(function() {
console.log("---",$(this));
// checked.push($(this).attr("value"));//獲取value值
checked.push($(this).next().text());//獲取顯示文本的值
});
alert(checked);
}else{
alert("您還沒選擇！");
}
});
});
</script>
</head>
<body>
<div id="div1">
<input type="checkbox" /><label>歌曲1</label><br />
<input type="checkbox" /><label>歌曲2</label><br />
<input type="checkbox" /><label>歌曲3</label><br />
<input type="checkbox" /><label>歌曲4</label><br />
<input type="checkbox" /><label>歌曲5</label><br />
<input type="checkbox" /><label>歌曲6</label><br />
<input type="checkbox" /><label>歌曲7</label><br />
<input type="button" id="selAll" value="全選" />
<input type="button" id="unselAll" value="全不選" />
<input type="button" id="reverse" value="反選 " />
<input type="button" id="submit" value="提交"/>
</div>
</body>
</html>
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
