jQuery determines whether the checkbox is selected and selects all and inverts the selection implementation code-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

jQuery determines whether the checkbox is selected and selects all and inverts the selection implementation code

Feb 06, 2017 pm 01:20 PM

jQuery determines whether the checkbox (checkbox) is selected:
if($("#id").attr("checked")==true)

jQuery implements checkbox (checkbox) Box) selected, all-selected/inverse-selected code:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;jQuery如何判断checkbox（复选框）是否被选中以及全选、反选&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
&lt;!--
$(&quot;document&quot;).ready(function(){
 $(&quot;#all&quot;).click(function(){   
  if(this.checked){   
   $(&quot;input[name=&#39;checkbox&#39;]&quot;).each(function(){this.checked=true;});
   $(&quot;#btn1&quot;).attr(&quot;value&quot;,&quot;反选&quot;);   
  }else{   
   $(&quot;input[name=&#39;checkbox&#39;]&quot;).each(function(){this.checked=false;});   
   $(&quot;#btn1&quot;).attr(&quot;value&quot;,&quot;全选&quot;); 
  }   
 });

 $(&quot;#btn1&quot;).click(function(){
  $(&quot;[name=&#39;checkbox&#39;]&quot;).attr(&quot;checked&quot;,&#39;true&#39;);//全选
 });

 $(&quot;#btn2&quot;).click(function(){
  $(&quot;[name=&#39;checkbox&#39;]&quot;).removeAttr(&quot;checked&quot;);//取消全选
 });

 $(&quot;#btn3&quot;).click(function(){
  $(&quot;[name=&#39;checkbox&#39;]:even&quot;).attr(&quot;checked&quot;,&#39;true&#39;);//选中所有奇数
 });

 $(&quot;#btn4&quot;).click(function(){
  $(&quot;[name=&#39;checkbox&#39;]&quot;).each(function(){
   if($(this).attr(&quot;checked&quot;))
   {
    $(this).removeAttr(&quot;checked&quot;);
   }else{
    $(this).attr(&quot;checked&quot;,&#39;true&#39;);
   }
  });
 });

 $(&quot;#btn5&quot;).click(function(){
  var str=&quot;&quot;;
  //$(&quot;input:checkbox[name=&#39;checkbox&#39;]:checked&quot;).each(function(){//可以
  $(&quot;[name=&#39;checkbox&#39;][checked]&quot;).each(function(){
   str+=$(this).val()+&quot;\r\n&quot;;
  });
  alert(str);
 });
});
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form name=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
     &lt;input type=&quot;checkbox&quot; id=&quot;all&quot; name=&quot;all&quot;&gt;
        &lt;input type=&quot;button&quot; id=&quot;btn1&quot; value=&quot;全选&quot;&gt;
        &lt;input type=&quot;button&quot; id=&quot;btn2&quot; value=&quot;取消全选&quot;&gt;
        &lt;input type=&quot;button&quot; id=&quot;btn3&quot; value=&quot;选中所有奇数&quot;&gt;
        &lt;input type=&quot;button&quot; id=&quot;btn4&quot; value=&quot;反选&quot;&gt;
        &lt;input type=&quot;button&quot; id=&quot;btn5&quot; value=&quot;获得选中的所有值&quot;&gt;
        &lt;br /&gt;
        &lt;input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox1&quot;&gt;checkbox1
        &lt;input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox2&quot;&gt;checkbox2
        &lt;input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox3&quot;&gt;checkbox3
        &lt;input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox4&quot;&gt;checkbox4
        &lt;input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox5&quot;&gt;checkbox5
        &lt;input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox6&quot;&gt;checkbox6
        &lt;input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox7&quot;&gt;checkbox7
        &lt;input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox8&quot;&gt;checkbox8
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

For more jQuery judgment of checkbox (checkbox) whether it is selected and all-selected, inverse-selected implementation code related articles, please pay attention to the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn