ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryは全選択と逆単一選択を実装します

jqueryは全選択と逆単一選択を実装します

php中世界最好的语言
php中世界最好的语言オリジナル
2018-04-19 16:33:212799ブラウズ

今回は、全選択と単一選択を反転するためのjqueryをご紹介します。jqueryで全選択と単一選択を反転するための注意事項とは何ですか。実際のケースを見てみましょう。

jqueryは全選択と逆単一選択を実装します

<linkrel="stylesheet"href="http://wiki.jikexueyuan.com/project/bootstrap4/dist/css/bootstrap.min.css"rel="external nofollow">
 <scriptsrc="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 </script>
<tableclass="table table-bordered ">
 <theadclass="tab_head">
 <tr>
  <td> <inputtype="checkbox"onclick="selectAll()"></td>
  <th>角色名称</th>
  <th>角色说明</th>
  <th>所属系统</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td> <inputtype="checkbox"></td>
  <td>系统管理员</td>
  <td>管理员角色</td>
  <td>武进公安平台</td>
 </tr>
 <tr>
  <td> <inputtype="checkbox"></td>
  <td>系统管理员</td>
  <td>管理员角色</td>
  <td>武进公安平台</td>
 </tr>
 <tr>
  <td> <inputtype="checkbox"></td>
  <td>系统管理员</td>
  <td>管理员角色</td>
  <td>武进公安平台</td>
 </tr>
 </tbody>
 </table>
 <script>
 function selectAll(){
 $("input[type=&#39;checkbox&#39;]").each( function() {
  if($(this).prop("checked")==true) {
  $("input[type=&#39;checkbox&#39;]").prop(&#39;checked&#39;, true);
  return;
  } else {
  $("input[type=&#39;checkbox&#39;]").prop(&#39;checked&#39;, false);
  return;
  }
 });
 }
 </script>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQuery プラグイン FusionCharts は円グラフを描画します

jquery は非動的検索を実装します

以上がjqueryは全選択と逆単一選択を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。