すべてを選択する、すべてを選択しない、および選択効果を逆にするための jquery 実装コード [推奨]

ホームページ

ウェブフロントエンド

jsチュートリアル

すべてを選択する、すべてを選択しない、および選択効果を逆にするための jquery 実装コード [推奨]_jquery

May 16, 2016 pm 03:01 PM

jquery すべての選択を解除しますすべて選択反選挙

すべてを選択する、すべてを選択しない、および選択効果を反転するための jquery 実装コード [推奨]

最初に: jquery を紹介します

&lt;title&gt;haran.info_jquery实例_全选全不选反选_select-all_unselect-all_reverse&lt;/title&gt;
&lt;meta http-equiv="content-type"content="text/html; charset=UTF-8"/&gt;
&lt;script src="/js/jquery-1.8.3.min.js"type="text/javascript"&gt;&lt;/script&gt;&lt;!-- 引入Jquery --&gt;

ログイン後にコピー

スタイル:

&lt;styletype="text/css"&gt;
&lt;!--
#div1{
  width:980px;
  margin:0 auto;
  position:relative;
  text-align:left;
  padding-left:400px;
  line-height:30px;
  border:1px dotted #0075c5;
}
li{
  display:block;
  list-style:none;
  float:left;
  position:relative;
  padding-left:20px;
}
.clr{
  height:20px;
}
--&gt;
&lt;/style&gt;

ログイン後にコピー

ボディレイアウト:

&lt;divid="div1"&gt;
  &lt;divclass="clr"&gt; &lt;/div&gt;
  &lt;!--选项开始--&gt;
  &lt;inputtype="checkbox"/&gt;&lt;ahref="haran.info"&gt;haran.info_脚本编程&lt;/a&gt;&lt;br/&gt; 
    
  &lt;inputtype="checkbox"/&gt;&lt;ahref="haran.info"&gt;haran.info_网站编程&lt;/a&gt;&lt;br/&gt; 
    
  &lt;inputtype="checkbox"/&gt;&lt;ahref="haran.info"&gt;haran.info_系统管理&lt;/a&gt;&lt;br/&gt; 
    
  &lt;inputtype="checkbox"/&gt;&lt;ahref="haran.info"&gt;haran.info_服务器配置&lt;/a&gt;&lt;br/&gt; 
    
  &lt;inputtype="checkbox"/&gt;&lt;ahref="haran.info"&gt;haran.info_系统运维&lt;/a&gt;&lt;br/&gt; 
    
  &lt;inputtype="checkbox"/&gt;&lt;ahref="haran.info"&gt;haran.info_博客&lt;/a&gt;&lt;br/&gt; 
    
  &lt;inputtype="checkbox"/&gt;&lt;ahref="haran.info"&gt;haran.info_首页&lt;/a&gt;&lt;br/&gt;
  &lt;!--选项结束--&gt;
  &lt;!--功能按钮开始--&gt;
  &lt;inputtype="button"id="selAll"value="全选"/&gt; 
    
  &lt;inputtype="button"id="unselAll"value="全不选"/&gt; 
    
  &lt;inputtype="button"id="reverse"value="反选 "/&gt; 
  &lt;!--功能按钮结束--&gt;
  &lt;divclass="clr"&gt; &lt;/div&gt;
&lt;/div&gt;&lt;!--关闭div1--&gt;

ログイン後にコピー

関数の実装:

&lt;scripttype="text/javascript"&gt;
$(document).ready(function () {
      
  $("#selAll").click(function () { //":checked"匹配所有的复选
    $("#div1 :checkbox").attr("checked", true); //"#div1 :checked"之间必须有空格checked是设置选中状态。如果为true则是选中fo否则false为不选中
  });
      
  $("#unselAll").click(function () { 
    $("#div1 :checkbox").attr("checked", false); 
  });
      
  //理解用迭代原理each(function(){})
  $("#reverse").click(function () { 
  $("#div1 :checkbox").each(function () {
  $(this).attr("checked",!$(this).attr("checked")); //!$(this).attr("checked")判断复选框的状态：如果选中则取反
    }); 
  });
}); 
&lt;/script&gt;

ログイン後にコピー

すべてを選択する、何も選択しない、および選択効果を反転するための上記の jquery 実装コード [推奨] は、エディターによって共有されるすべての内容です。参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。。

このウェブサイトの声明

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