<p>1、checkbox list选择</p><p>效果图：</p><p><img src="/up_pic/201807/040438098788.png" title="040438098788.png" alt="1.png"/></p><p>代码：</p><pre class="brush:html;toolbar:false"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="Scripts/jquery-1.7.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
//全选
$("#btnCheckAll").bind("click",function(){
$("[name=chkItem]:checkbox").attr("checked",true);
});
//全不选
$("#btnCheckNone").bind("click",function(){
$("[name=chkItem]:checkbox").attr("checked",false);
});
//反选
$("#btnCheckReverse").bind("click",function(){
$("[name=chkItem]:checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
});
});
//全不选
$("#btnSubmit").bind("click",function(){
varresult=newArray();
$("[name=chkItem]:checkbox").each(function(){
if($(this).is(":checked")){
result.push($(this).attr("value"));
}
});
alert(result.join(","));
});
});
</script>
</head>
<body>
<div>
<inputname="chkItem"type="checkbox"value="今日话题"/>今日话题
<inputname="chkItem"type="checkbox"value="视觉焦点"/>视觉焦点
<inputname="chkItem"type="checkbox"value="财经"/>财经
<inputname="chkItem"type="checkbox"value="汽车"/>汽车
<inputname="chkItem"type="checkbox"value="科技"/>科技
<inputname="chkItem"type="checkbox"value="房产"/>房产
<inputname="chkItem"type="checkbox"value="旅游"/>旅游
</div>
<div>
<inputid="btnCheckAll"type="button"value="全选"/>
<inputid="btnCheckNone"type="button"value="全不选"/>
<inputid="btnCheckReverse"type="button"value="反选"/>
<inputid="btnSubmit"type="button"value="提交"/>
</div>
</body>
</html></pre><p>2、checkbox table选中</p><p>效果图：</p><p><img src="/up_pic/201807/040438292843.png" title="040438292843.png" alt="2.png"/></p><p>代码：</p><pre class="brush:html;toolbar:false"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<styletype="text/css">
table
{
border-collapse:collapse;
}
td
{
border:1pxsolid#ccc;
}
</style>
<scriptsrc="Scripts/jquery-1.7.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
//chkAll全选事件
$("#chkAll").bind("click",function(){
$("[name=chkItem]:checkbox").attr("checked",this.checked);
});
//chkItem事件
$("[name=chkItem]:checkbox").bind("click",function(){
var$chk=$("[name=chkItem]:checkbox");
$("#chkAll").attr("checked",$chk.length==$chk.filter(":checked").length);
})
});
</script>
</head>
<body>
<tableid="tb">
<thead>
<tr>
<td>
<inputid="chkAll"type="checkbox"/>
</td>
<td>
分类名称
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<inputname="chkItem"type="checkbox"value="今日话题"/>
</td>
<td>
今日话题
</td>
</tr>
<tr>
<td>
<inputname="chkItem"type="checkbox"value="视觉焦点"/>
</td>
<td>
视觉焦点
</td>
</tr>
<tr>
<td>
<inputname="chkItem"type="checkbox"value="财经"/>
</td>
<td>
财经
</td>
</tr>
<tr>
<td>
<inputname="chkItem"type="checkbox"value="汽车"/>
</td>
<td>
汽车
</td>
</tr>
<tr>
<td>
<inputname="chkItem"type="checkbox"value="科技"/>
</td>
<td>
科技
</td>
</tr>
<tr>
<td>
<inputname="chkItem"type="checkbox"value="房产"/>
</td>
<td>
房产
</td>
</tr>
<tr>
<td>
<inputname="chkItem"type="checkbox"value="旅游"/>
</td>
<td>
旅游
</td>
</tr>
</tbody>
</table>
</body>
</html></pre>