Jquery全選系列操作（鋒利的jQuery）
阿新 • • 發佈：2019-01-30
xmlns con javascrip 4.4 input lse ttr -type jquery
Jquery全選系列操作（鋒利的jQuery）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>復選框應用</title>
<script src="../../js/jquery-1.4.4.min.js"></script>
</head>
<body>
<form >
你愛好的運動是？<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="籃球" />籃球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />
<input type="button" id="CheckedAll" value="全選" />
<input type="button" id="CheckedAllNo" value="全不選" />
<input type="button" id="CheckedRev" value="反選" />
<input type="button" id="send" value="提交" />
</form>
<!--<form style="display:none" >
你愛好的運動是？<br />
<input type="button" id="CheckedAll" value="全選/全不選" />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="籃球" />籃球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />
</form>-->
<script>
$(function ()
{
//全選
$("#CheckedAll").click(function () {
$(‘[name=items]:checkbox‘).attr("checked", true); //attr() 方法設置或返回被選元素的屬性值。
//下面只是研究,或者是可參考,（我還沒弄懂）
//判斷如果當前復選框被選中
//if (this.checked) {
// $(‘[name=items]:checkbox‘).attr("checked", true); //attr() 方法設置或返回被選元素的屬性值。
//}
//else {
// $(‘[name=items]:checkbox‘).attr("checked", false); //attr() 將checked 設置為false即被全不選。
//}
//$(‘[name=items]:checkbox‘).attr("checked", this.checked); //attr() 方法設置或返回被選元素的屬性值。
//可以去掉if判斷
//$(‘[name=items]:checkbox‘).click(function () {
// var flag = true;
// $(‘[name=items]:checkbox‘).each(function () {
// if (!this.checked) {
// flag = false;
// }
// });
// $("#checkedall").attr("checked", flag);
//})
});
//全不選
$("#CheckedAllNo").click(function () {
$(‘[name=items]:checkbox‘).attr("checked", false); //attr() 將checked 設置為false即被全不選。
});
//反選,如果選中，則不選中，如果不選中則選中
//$("#CheckedRev").click(function () {
// $(‘[name=items]:checkbox‘).each(function () {
// $(this).attr("checked", !$(this).attr("checked")); //$(this)取出當前對象並轉換為jQuery對象
// })
//});
//代碼簡化反選
$("#CheckedRev").click(function () {
$(‘[name=items]:checkbox‘).each(function () {
this.checked = !this.checked;
})
});
//提交顯示選中的check值
$("#send").click(function ()
{
var str = "你選中的是\r\n";
$(‘[name=items]:checkbox:checked‘).each(function () {
str += $(this).val() + "\r\n";
});
alert(str)
})
})
</script>
</body>
</html>
Jquery全選系列操作（鋒利的jQuery）