jQuery_すべてを選択してすべてを選択しない効果を実現

全選練習
htmlコード

<form>
         ？<input type="checkbox" id="checkedAllBox"/>  /   

  <br/>
  <input type="checkbox" name="items" value="  "/>  
  <input type="checkbox" name="items" value="  "/>  
  <input type="checkbox" name="items" value="   "/>   
  <input type="checkbox" name="items" value="   "/>   
  <br/>
  <input type="button" id="checkedAllBtn" value=" 　 "/>
  <input type="button" id="checkedNoBtn" value="   "/>
  <input type="button" id="checkedRevBtn" value=" 　 "/>
  <input type="button" id="sendBtn" value=" 　 "/>
form>

jsコード

"text/javascript"</span>>
  <span class="hljs-comment">/*
       :
   1.   '  ':       
   2.   '   ':         
   3.   '  ':            
   4.   '  ':          
   5.   '  /   ':       ,       
   6.        ,      '  /   '     
   */</span>
  <span class="hljs-keyword">var</span> $checkedAllBox = $(<span class="hljs-string">'#checkedAllBox'</span>)
  <span class="hljs-keyword">var</span> $items = $(<span class="hljs-string">':checkbox[name=items]'</span>)

  <span class="hljs-comment">// 1.   '  ':       </span>
  $(<span class="hljs-string">'#checkedAllBtn'</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
    $items.prop(<span class="hljs-string">'checked'</span>, <span class="hljs-literal">true</span>)
    $checkedAllBox.prop(<span class="hljs-string">'checked'</span>, <span class="hljs-literal">true</span>)
  })

  <span class="hljs-comment">// 2.   '   ':         </span>
  $(<span class="hljs-string">'#checkedNoBtn'</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
    $items.prop(<span class="hljs-string">'checked'</span>, <span class="hljs-literal">false</span>)
    $checkedAllBox.prop(<span class="hljs-string">'checked'</span>, <span class="hljs-literal">false</span>)
  })

  <span class="hljs-comment">// 3.   '  ':            </span>
  $(<span class="hljs-string">'#checkedRevBtn'</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
    $items.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
      <span class="hljs-keyword">this</span>.checked = !<span class="hljs-keyword">this</span>.checked
    })
    <span class="hljs-comment">// $items.filter(':not(:checked)').length===0       </span>
    <span class="hljs-comment">//     jquery   </span>
    $checkedAllBox.prop(<span class="hljs-string">'checked'</span>, $items.filter(<span class="hljs-string">':not(:checked)'</span>).length===<span class="hljs-number">0</span>)
  })

  <span class="hljs-comment">//4.   '  ':          </span>
  $(<span class="hljs-string">'#sendBtn'</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
    $items.filter(<span class="hljs-string">':checked'</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
      alert(<span class="hljs-keyword">this</span>.value)
    })
  })

  <span class="hljs-comment">// 5.   '  /   ':       ,       </span>
  $checkedAllBox.click(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
    $items.prop(<span class="hljs-string">'checked'</span>, <span class="hljs-keyword">this</span>.checked)
  })

  <span class="hljs-comment">// 6.        ,      '  /   '     </span>
  $items.click(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
    $checkedAllBox.prop(<span class="hljs-string">'checked'</span>, $items.filter(<span class="hljs-string">':not(:checked)'</span>).length===<span class="hljs-number">0</span>)
  })
<<span class="hljs-regexp">/script></span></code></pre> 
  <h3 id="    ">    </h3> 
  <p><a href="https://img.  .com/image/info8/41cc51edcd704375a673fe4ebcae4765.gif" target="_blank"><img src="https://img.  .com/image/info8/41cc51edcd704375a673fe4ebcae4765.gif" alt="jQuery_         _ 1   " title="" width="490" height="110" style="border:1px solid black;"></a></p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1187548824189640704"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
                    
                     
                

興味があるかもしれません

データベースのインストール
Array_06
java oracle sql

Weblogic Server Consoleパスワードの変更と忘れの解決方法
bijian1013
Welogic

IllegalStateException: Cannot forward a response that is already committed
Cwind
java Servlets

フローベースの装飾設計モード
木zi_鳴く
デザインモード

Linuxのuniqコマンド
トリガーされます
linux

正規表現Pattern
忌み嫌う_
Pattern

OracleアドバンスドクエリーのOVER(PARTITION BY.)
知了ing
oracle sql

Pythonデバッグ
矮蛋
python pdb

アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号