HTML+JS 全选与取消全选功能

子枫 [Rainy]

发布于 2022-11-07

735 浏览

<pre class="brush:html;toolbar:false">&lt;!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全选框--&gt;
&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;class=&quot;box-title&quot;&nbsp;onclick=&quot;selectAll()&quot;&gt;

&lt;!--      需要被选中的部分--&gt;
&lt;input&nbsp;name=&#39;box&#39;&nbsp;type=&#39;checkbox&#39;&gt;
&lt;input&nbsp;name=&#39;box&#39;&nbsp;type=&#39;checkbox&#39;&gt;
&lt;input&nbsp;name=&#39;box&#39;&nbsp;type=&#39;checkbox&#39;&gt;
&lt;input&nbsp;name=&#39;box&#39;&nbsp;type=&#39;checkbox&#39;&gt;</pre><pre class="brush:html;toolbar:false">var&nbsp;isCheckAll&nbsp;=&nbsp;false;
function&nbsp;selectAll()&nbsp;{
  //&nbsp;取消全选
  if&nbsp;(isCheckAll)&nbsp;{
   $(&quot;input[name=&#39;box&#39;]&quot;).each(function()&nbsp;{
     this.checked&nbsp;=&nbsp;false;
     this.parentNode.parentNode.style.backgroundColor=&quot;&quot;;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isCheckAll&nbsp;=&nbsp;false;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;全选
&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;  $(&quot;input[name=&#39;box&#39;]&quot;).each(function()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;   this.checked&nbsp;=&nbsp;true;
&nbsp;&nbsp;&nbsp;&nbsp;    this.parentNode.parentNode.style.backgroundColor=&quot;#F78181&quot;;
&nbsp;&nbsp;&nbsp;&nbsp; });
&nbsp;&nbsp;&nbsp;&nbsp; isCheckAll&nbsp;=&nbsp;true;
&nbsp;&nbsp;&nbsp;&nbsp;}
}</pre><p><br/></p>

评论输入框

评论列表

没有任何评论

HTML+JS 全选与取消全选功能

评论 (56)

分享图片