jQuery操作checkbox选择

<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">&lt;!DOCTYPEhtmlPUBLIC&quot;-//W3C//DTDXHTML1.0Transitional//EN&quot;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &lt;htmlxmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; &lt;headrunat=&quot;server&quot;&gt; &lt;title&gt;&lt;/title&gt; &lt;scriptsrc=&quot;Scripts/jquery-1.7.min.js&quot;type=&quot;text/javascript&quot;&gt;&lt;/script&gt; &lt;scripttype=&quot;text/javascript&quot;&gt; $(function(){ //全选 $(&quot;#btnCheckAll&quot;).bind(&quot;click&quot;,function(){ $(&quot;[name=chkItem]:checkbox&quot;).attr(&quot;checked&quot;,true); }); //全不选 $(&quot;#btnCheckNone&quot;).bind(&quot;click&quot;,function(){ $(&quot;[name=chkItem]:checkbox&quot;).attr(&quot;checked&quot;,false); }); //反选 $(&quot;#btnCheckReverse&quot;).bind(&quot;click&quot;,function(){ $(&quot;[name=chkItem]:checkbox&quot;).each(function(){ $(this).attr(&quot;checked&quot;,!$(this).attr(&quot;checked&quot;)); }); }); //全不选 $(&quot;#btnSubmit&quot;).bind(&quot;click&quot;,function(){ varresult=newArray(); $(&quot;[name=chkItem]:checkbox&quot;).each(function(){ if($(this).is(&quot;:checked&quot;)){ result.push($(this).attr(&quot;value&quot;)); } }); alert(result.join(&quot;,&quot;)); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;今日话题&quot;/&gt;今日话题 &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;视觉焦点&quot;/&gt;视觉焦点 &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;财经&quot;/&gt;财经 &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;汽车&quot;/&gt;汽车 &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;科技&quot;/&gt;科技 &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;房产&quot;/&gt;房产 &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;旅游&quot;/&gt;旅游 &lt;/div&gt; &lt;div&gt; &lt;inputid=&quot;btnCheckAll&quot;type=&quot;button&quot;value=&quot;全选&quot;/&gt; &lt;inputid=&quot;btnCheckNone&quot;type=&quot;button&quot;value=&quot;全不选&quot;/&gt; &lt;inputid=&quot;btnCheckReverse&quot;type=&quot;button&quot;value=&quot;反选&quot;/&gt; &lt;inputid=&quot;btnSubmit&quot;type=&quot;button&quot;value=&quot;提交&quot;/&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</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">&lt;!DOCTYPEhtmlPUBLIC&quot;-//W3C//DTDXHTML1.0Transitional//EN&quot;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &lt;htmlxmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; &lt;headrunat=&quot;server&quot;&gt; &lt;title&gt;&lt;/title&gt; &lt;styletype=&quot;text/css&quot;&gt; table { border-collapse:collapse; } td { border:1pxsolid#ccc; } &lt;/style&gt; &lt;scriptsrc=&quot;Scripts/jquery-1.7.min.js&quot;type=&quot;text/javascript&quot;&gt;&lt;/script&gt; &lt;scripttype=&quot;text/javascript&quot;&gt; $(function(){ //chkAll全选事件 $(&quot;#chkAll&quot;).bind(&quot;click&quot;,function(){ $(&quot;[name=chkItem]:checkbox&quot;).attr(&quot;checked&quot;,this.checked); }); //chkItem事件 $(&quot;[name=chkItem]:checkbox&quot;).bind(&quot;click&quot;,function(){ var$chk=$(&quot;[name=chkItem]:checkbox&quot;); $(&quot;#chkAll&quot;).attr(&quot;checked&quot;,$chk.length==$chk.filter(&quot;:checked&quot;).length); }) }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;tableid=&quot;tb&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;td&gt; &lt;inputid=&quot;chkAll&quot;type=&quot;checkbox&quot;/&gt; &lt;/td&gt; &lt;td&gt; 分类名称 &lt;/td&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt; &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;今日话题&quot;/&gt; &lt;/td&gt; &lt;td&gt; 今日话题 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;视觉焦点&quot;/&gt; &lt;/td&gt; &lt;td&gt; 视觉焦点 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;财经&quot;/&gt; &lt;/td&gt; &lt;td&gt; 财经 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;汽车&quot;/&gt; &lt;/td&gt; &lt;td&gt; 汽车 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;科技&quot;/&gt; &lt;/td&gt; &lt;td&gt; 科技 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;房产&quot;/&gt; &lt;/td&gt; &lt;td&gt; 房产 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;inputname=&quot;chkItem&quot;type=&quot;checkbox&quot;value=&quot;旅游&quot;/&gt; &lt;/td&gt; &lt;td&gt; 旅游 &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</pre>
RangeTime:0.006965s
RangeMem:211.55 KB
返回顶部 留言