jquery1.11.1版本完成对checkbox的操作
1. 使用属性prop设置选中状态
2.使用:checked和:not(:checked)获取选中的元素
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>测试CheckBox</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
div.content{
width:30%;
margin:auto;
border:1px dotted #0000ff;
background-color: #ffa0a0;
padding:10px;
}
div.sel span{
display: block;
}
.mt_s{
margin-top:5px;
}
</style>
</head>
<body>
<div class="content">
<h1>测试CheckBox</h1>
<div class="sel mt_s">
<span >按钮1<input type="checkbox" class="c1"></span>
<span>按钮2<input type="checkbox" class="c2"></span>
<span>按钮3<input type="checkbox" class="c3"></span>
<span>按钮4<input type="checkbox" class="c4"></span>
<span>按钮5<input type="checkbox" class="c5"></span>
</div>
<div class="op mt_s">
<button onclick="selectAll(true)">全选</button>
<button onclick="selectAll(false)">全消</button>
<button onclick="getCheck(true)">获取选择数据</button>
<button onclick="getCheck(false)">获取未选择数据</button>
</div>
<div class="sta mt_s">
<span class="blue"><strong>结果:</strong></span><span class="status"></span>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
"use strict";
//全选/取消全选
function selectAll(bcheck){
var sel = getsel();
log(sel);
sel.prop("checked",bcheck);
}
//获取选中/未选中的记录
function getCheck(bcheck){
var sel = getsel();
var c;
if(bcheck){
c = sel.filter(":checked");
}
else{
c = sel.filter(":not(:checked)");
}
setStatus(c);
} //获取全部checkbox
function getsel(){
return $(".sel input:checkbox");
}
//更新查询结果
function setStatus(s){
var cName="";
log(s);
for(var i=0;i<s.length;i++){
cName +=$(s[i]).attr("class");
if(i<s.length-1){
cName +=","
}
}
cName = cName==""?"没有数据":cName;
$(".status").text(cName);
}
//记录控制台信息
function log(s){
console.log(s);
}
</script>
</body>
</html>
效果图:
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZ0AAAEDCAIAAABh0U7GAAASSUlEQVR4nO2dO5arOhBFGZAHccP2NDyGDhy+CXgGHfRMOn3hCzq/Q+EF2CD0KRVQ/Mpba69ebiyEENLx0QdoWgKBQPAVmr0zQCAQCMYBXSMQCN4CukYgELwFdI1AIHgLeV1rmrb9/uYvf/nL37P8reta+/0NAHAWmrGS5XXtqX8AAGcBvwYAnsCvAYBH8GsA4An8GgB4BL8GAJ7ArwGAR/BrAOAJ/BoAeAS/BgCewK8BgEfwawDgCfwaAHgEvwYAnsCvAYBH8GsA4An8GgB4BL8GAJ7ArwGAR/BrAOAJ/BoAeAS/BgCewK8BgEfwawDgCfwaAHgEvwYAnsCvAYBH8GsA4An8GgB4BL8GAJ7ArwGAR/BrAOAJ/BoAeAS/BgCeOKRfezz+Ph5/LRO8fTSXr8f+xQ0AG2Hp1x63j6Zpmubj9gi3DP+G3K9NVm5eiTSX21+TM+wTbK4/uxc3AKzMCn4tVqX7ZyOHRNoGGcqo3t/bpSkJZTVLwkEBwBPm42ud9DRN01zvg65d7+Novd4Vda0kXj/X556fd12Wel273sPdp4mj4hCWCZpx/7xeP+PCB/DMOuNrI8tW0bWMFtR0rf1+fL2UM0lWzE8XWd3P7RWwDx+3+9f1+nntdxy50SPpWlBEulIafo3K4UgnCCBi7tfalyJ83r+rfq1rKq9Gdfl6aHTtOxSUemOLdK1v80Jrv78kbdC+UCnG43SqDO9BfOIKMif+PZZvuvBwdDaYDw107XH7GDqPWV1rmub6o5OJKd3JrLbePy+Xj6xl69t2Igf5LvBhda34o1JGce5m8zkA62Hj1+7XuLU/iXXtpQsL/VofTWMf0uYdmK+olVZ6qbnu83voGtPKcBYs/drz9zxsD4/H31FXKGxmi3UtPfS0EBwryHN9UqJr+aPTfDddoysKh8dsfC1xOqOh6DV1rcbruNUOlMqSJB1YdA3gSBiPr43HvB5f1+vn9bKBX6vx6nXWdG28QkWd/pvoWn5KAeCQmPm176Hqf9weryVdt1TLbHTteSzNWE8/mlaJPHNp2yjDyTrkigqk65arZ6TfJdW1zDLpUY+7qGvDiGSlh14/9/EalGfR3ZONuEKYifl86OPrcvm4XH9eUtXPDyzWNeG+BakB/L3dvm63z6vc/vvM15pulvh+hld+agvl0rG8qrCmEcQBwbxfe+6inwuu90CHq/PKRrUw012GA00rf4AUS7820AtcZj409DWz/dqPQqqStaayBci1NA2hro0VpM9AmuDolDPnlTn9goT12U6LIqNrz+OWXGTquYbCKxnPoh2uTMIkGtrFP153Hk7GauvXuqYe3W+wpq6VpkT7HrFCsBbrWnlMKj4X4RxLLq/UQ5TMVKxrr3Iu/xgUjjL8QiTqJmh3bcamF8TL1+N1aAbvwIQ1/Nqzrkd9z838WuGxIrU0l+qa/p6wkllrv7/j1h6fb5o3rV8TD/pi8vq1ylyzqHqhiF/UqxEBKqzk154tM76PajR6sq2uqWYGl46vqXVNnsfIZkMQL4HgrJWzmYKuBSI1nI4YXxMhHCugBwpm2Pu10Z0AadMabd9K1zRTooOgLJgP1XxVfXaTta6Ng3R2sgyVlygW06w/ZSDvTwFms4pfG0+3Dbo2Htwpd5FW0TVVL2wYpLNav1bRNb1ILde1y9dDoSBKXXulYKBr5VkXgPmY+LX+JqpEGgb9yupdZ0k20DVVsqrO2pT7DSr9UL1DWahr2qUntW5jkuDSfmi8lo0VHrAcU782XiLwrKDDmJr0dCATXXutmJs3qtVRftrl+DS1iln4avKjMRVS+HO9fl6jU8uMKlaWyE30awvnDTLzS9xUDybYjq+9mo3wdO/r16OwMqtrGwvWeTx3qcxCDm2sW7X7k4tTOHqnL+Ozm65rChfzXN6szVhyA3/7/V18QJOg3bp5g1DFild8KK6CWkV3jJTWxABMxH58rdQ97Ld/VZdQTde1+FEiQwrh3TmXr0dsCnIeR3JG+YWjM3RNtGyFdzgIGevOq75+7YnQ3Vat8ygsDJ61tC38SpRIgCmY+rXC73PUvF+NR17TpNO1y0dyT/t4je6okYxdT9e0UoXNToyWH1yuuVc8Z39y0xTys3wn3ntUHk0r9kZLkhcMMkjrb4PSFvvahXoyHIXeKMzH3K9lR0kyj9OQKr1K16Lx5uvnSMvyjTm3Y7kJZd5iVV74GoTogcC5r+Sj1NxK5lYnSZr7kN5SGmZM834Deb4yk0LmEqQZ6843k2GmR2E+ln4td09P/i5r4Uln03VttAC42h5iKcEaALjC2q8luiY8OiIcTMmaBa2u9Sp2v//c7z+afI4sD7oG4A7T8bXvYC7vKT1FeUrvcx7JTX3w+Od2+7rNvU16OBaj1ACuWPl5HjMkQ55SMCYzJQcAHrD2awAAe7LB+0MBADYHvwYAnsCvAYBH8GsA4An8GgB4BL8GAJ7ArwGAR/BrAOAJ/BoAeAS/BgCewK8BgEfwawDgCfwaAHgEvwYAnsCvAYBH8GsA4An8GgB4BL8GAJ7ArwGAR/BrAOAJ/BoAeAS/BgCewK8BgEfwawDgCfwaAHgEvwYAnsCvAYBH8GsA4Aljv9Y0TXWL/lsAgJkY+rWsTgniFX7VJGHSafyjCHhPgHdgdb9W2liNPEPX/ojh979/0TWAd2ENv5aar9SFZbfLuiaIXadr+fy3bdu26BrAm2Dj12T9CqNlP2fjRBGqnVN0DQAG1vBrwpZ+e8nECTuiawBQZZXxtaovE8QLXQMAA2z9Wi9tpRDFj/bV92Qj0DUA6LD0a1XZimKmEqY3einoGgAMLPdroU0LN2Y/RzuW/kXXAGAeK65fKxmxUvx092r8EHQNAAaW+7WeVHdKI2XZ+OgaACxno/tD5XkAq/G13//+lUHXAN6FlfxapGXZWc40TvZzuHvRACrD7sUNACtj5tdC5yW7s+yWphB2LyAAOCVWfg0ZAoAjwPNyAcAjVn4NAOAI4NcAwCOGfk2YGVDGBwBYyJ7Py21z60JmT4byHHAAGFjVr5U2ViPP0DWeAw4A7Xp+rbQeTTBoaQpp4oKV4z4qABhY7teUS2ojUSsllY0g/9uiawDwYqP7Q7MxSyYuuyO6BgATWO7XeprVngOOrgGAEnu/1ktbKUTxo33lnmy6Vw+6BgADVn6tKltRzFTCqkZP+ApdA4AOG78W2rRwY/ZztGPpX+UuPegaAAxY+bWW54ADwAHYYj5U36OUdU1Ip0XXACBkJb8WbimpW9R7FXRN/rflOeAA8GJFvxZpWXaWM42T/Rzunk2n/eY54AAQYOLXQuclu7PsllS25A4sAEAJS7+GDAHAUTDxawAAB4Hn5QKAR/BrAOAJ/BoAeMTQr01dTMtUAwCYw/sNAMAjq/q10sZq5Bm6xvsNAKDl/QYA4JPlfk15q0AkaqWkshHkf1tR15qmQdcA3gf/7zd4po+uAbwVy/1aT7Pa+w2ycUJ6XWsCrR50E10DeBtO9n6D0vZ2rGudkIWihq4BvBdWfq0qW1HMVMKqRk/4KtK1SNTQNYD34XzvNyh9G46vpaKGrgG8F1Z+rV3//QbCt9G8QSRq6BrA+3Ca9xvI/7asXwOAkJX8WrilpG5R71Wpa6XxNd5vAADtid5vUEphQBn2LnEA2AITvxY6L9mdZbc0hbB/6QDA2eD9BgDgERO/BgBwEHheLgB4BL8GAJ7Y7Xkemm8BAGZi6NeU06DZrxZOhvIccADoWN2vlTZWI8/QNZ4DDgBP1vBrpfVogkFLU6geJYT7qACgw/J5HtVeZCRqpaSqEdA1AKiwhl8TtvTbSyZO2LFJnobUg64BQMcq42tVXyaI17yvWnQNAEJs/VovbaUQxY/2FXqy6BoAaDC+P1SWrShmKmGC0at6QHQNAAaW+7XQpoUbs5+jHUv/omsAMI+Nnr9momtyLxVdA4CB5X6tJzsoVhK1NL7G4pW+QtcAoGOj+0NL6hb1XhfqGs8BB4AnK/m1SMuy/cc0TvZzmkjmW2XYvbgBYGXM/FrovGR3lt2SDp/JHVgAAAkrv4YMAcAR4Hm5AOARK78GAHAE8GsA4BH8GgB4gvcbAIBHDP2acnlH9quFizx4vwEAdPB+AwDwyBp+rbTOVjBoaQpRyrKb4/5QAOg4zfsNqvZN0LWmadA1gPdiDb8mbOm3l0xcdsfZuvZMH10DeBtO834Dva41wTkNuomuAbwVtn6tl7ZSiOJH+8oxSz3cdqxrnZCFooauAbwPZ3q/geDy2kTXIlFD1wDei+V+LbRp4cbs52jH0r+lXUrfhuNrqaihawDvw2nebyDv2CbzBpGooWsA78Vyv9aTyo0wIpbGl/uh8oFYvwYAHad5v0HVyvF+AwAYWMmvRVoWTRGU4mQ/CylkT0MKuxc3AKwM7zcAAI9Y+TVkCACOAM/LBQCPWPk1AIAjgF8DAI/g1wDAE/g1APAIfg0APGHk144U/vz5c/Z8yi9qIIThFNfaQZCK+pgEYa5fa9vqPUzb8LxL9OT5/CPe6EroQlXXdr/Kbqg0q+Nh5td2L3rVBThJPjtdS/dqmuZt/2YL8BTX2gGn07WuAlR0TZPE7kWvugAnyWdJ196WVNrQtS05na7t49eyv8Clr4TIky/ASfIp+7XSxkkZmH06+qNEMauZj4KmAK2utUkZKkvpdEX9e0Jd6yrApn5N6FxkK9leuqbMZ9oklleUSX5NOO6kGqwsdk3zyPYiJ4lytaFupmszVKBaB45c1FlOp2tb+7X0ksiRjX9YVstntY5OymfVr6UlUyqrtAlVy1Mu9mzJZONksyGcUekoQgEuudbmZVhN56RFXa2uB2Uzv5aWoHzJ9eWuvQBG+cxmyTCfVn7td9xyNBkWUiu1+bRw0pjyltJeQla37IdOLUNlZThmUWc5na5t59c0NUBZp+dfAKN8lrJtVVE042t9HVXmU/6gL/Y0D6VsZBukPnuaAjS51iZlKKeQVpUTFfXvCXWtqwCr+7XSD0W2YgmRq1dioa5Nyme1GczOp9KvVSuuUJtLjbla7GlphDtmPwhtKYosHDRbgObefHYZlsotPZeDF/WM6npADjcfmq1S1XLXXgDTfAoVdGE+leNrcgtJ25tcpJpiz55d6XzTBNON1dYoF+Dy8TXbMozia+rV8Yv694S61lWA1f2a8vLor/rMC7BOPqNo6+lamoFshS5lUq7Q1WKPNmpUINUOITVl3sICNPFrhmUYnZdeho5T1FlOp2ub+rX0MlSr0dQrYTVvIOczbQzVk5qUzxnja6WGlM3VkmLPHmJSaqVok8pwjfG1VcvwvEX9e0Jd6yrAEf1aVkqU1X2DfAr1bz1d01TlVHCzEUptplrsfbRsSPct/ZsedFKRmvRDbcuwlP9zFXWW0+na4cbXSq1OiW9dy1Z6ZQbkCq0v9lKDKW2MUhYa5KTGZu7XFpahvHt6micq6t8T6lpXAVb3a6XfnOjHJ/3NkX+mJl8Ao3wKNUOTyWo+J82HynVdzli2ocoXqJSIcKDSv2mRli50elDb+dDlZajZeIqiznI6XeN5HkfMp8avvTnc9759ae+uVtPYwK8d5QKcJJ9Kv/Y+rOfXQMPpdA2/dsR8drr2TxKapnnbv2lA1w5SXQ+KiV/L1rxdglzX987dEGRdIyjDKa61gyAV9fGw8Ws7V+0kkM/3CZThZmF3tZqGgV8DADgMvD8UADyCXwMAT+DXAMAj+DUA8AR+DQA8YujXutvNNBsBAFbC2K/N0LVGDLsXEACcEiu/VlIija7JnwEA9Fj6tVSVNC5sR79mciA8JsARMfFrfZMuKVd1R+HzGqSZNEkHAHbHxq/JhkWja9v7NXQNwDNW42utriuq3H1LlhwUXQM4GmuNr83NzVq6Ns9LatJpCr1vANgT2/E1JXL3c5LL0xwr+1neqEwnzB7SBnAEVhlfCy2MXqGUKjZV6WZo1qrpAMAWGI6vhaTqI+jRDPnTZ8MkGroGcBZWvD9Ur2uRxWuni5ecDc322bo2NR0A2AJDvxbqkUbXIv2KImTt2wzJi3YXNmYzOS8dANgL+/G17MY0QlaeZkih+jyLh6secV46ALAnRxhfU0bYhiPkAQBmc6znr+2ua7tnAABsWMmvAQDswrH8GgCADfg1APAEfg0APIJfAwBP4NcAwCP4NQDwBH4NADyCXwMAT+DXAMAj+DUA8MQEv8Zf/vKXv2f5q/BrBAKBcNqArhEIBG8BXSMQCN4CukYgELwFdI1AIHgL/wNB76W1lR/ECAAAAABJRU5ErkJggg==" alt="" />