チェックボックスの全選択を実現する原生JS版とjQuery版/全て選択しない/選択/行内選択（Mr.Think）

日常プロジェクトでは、リスト型の記事やデータに対して、チェックボックスの全選択または全非選択機能を使用するのが一般的です。以前のプロジェクトではチェックボックスの選択jsを書いていましたが、整理されていませんでした。ちょうど数日前、ある兄弟がこの問題に直面しました。幸運にも、少し時間を割いて、原生JSとjQueryでそれぞれのバージョンを書きました。使用時の柔軟性を考慮して、未封装で、必要な場合は自分で関連するパラメータを変更してください。

機能紹介をクリックして確認DEMOデモ

1. 全選択/全非選択チェックボックス一元実装、つまりリスト内のチェックボックスの状態が全選択/全非選択チェックボックス前のチェックボックスの状態が一致;
2. 自動変更 全非選択/全非選択チェックボックスの状態、つまりリスト内のチェックボックスがすべて選択されている場合の全選択/全非選択チェックボックスも選択され、逆も然り;
3. リスト行内のクリックで行内のチェックボックスを選択し、1,2の機能連動。
また、この記事は全選択の実装に重点を置いています。マウスでホバーすると背景色が変更される単純な実装です。もっと完璧な実装については、以下を参照してください:

https://ja.oldtoolbag.com/article/24125.htm

原生JSバージョンの核心コード

htmlコード

<form id="js" name="js" action="#">
		<h5>原生JSサンプル</h5>
		<dl>
			<dt><label for="js_chk_0"><input type="checkbox" id="js_chk_0" name="chk_can" value="" />全選択/全非選択</label></dt>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS実装の全選択/全非選択、行を選択することでも選択または取消できます</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS実装の全選択/全非選択、行を選択することでも選択または取消できます</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS実装の全選択/全非選択、行を選択することでも選択または取消できます</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS実装の全選択/全非選択、行を選択することでも選択または取消できます</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS実装の全選択/全非選択、行を選択することでも選択または取消できます</dd>
			<dt><label for="js_chk_1><input type="checkbox" id="js_chk_1" name="chk_can" value="" />全選択/全非選択</label></dt>
		</dl>
	</form>

原生jsコード

//原生JS実装の全選択全非選択クラス
window.onload = function iCheckAll(){
 var js_chk = document.forms['js'].chk_can;
 var jsitems = document.forms['js'].jsitems;
 var jsrows = document.getElementById('js').getElementsByTagName('dd');
 //選択された数と実際のチェックボックスの数を比較して全選択を実行/全不選択ボックスの状態
 var chk_canle = function(){
  var checkedLen = 0;
		//リスト中の選択状態のチェックボックスの数を計算
  for (var m = 0; m < jsitems.length; m++) {
   if (jsitems[m].checked) {
    checkedLen += 1;
   }
  }
		//選択された数と実際の数が同じかどうかを判断し、全て選択を確認します。/全て選択しない状態
  for (var m = 0; m < js_chk.length; m++) {
   js_chk[m].checked = (jsitems.length == checkedLen);
  }
 }
	//全選択と全非選択を一体的に実現
 for (var i = 0; i < js_chk.length; i++) {
  js_chk[i].onclick = function(){
			//リスト中のチェックボックスと全選チェックボックスの統一状態
   for (var m = 0; m < jsitems.length; m++) {
    jsitems[m].checked = this.checked;
   }
			//全選チェックボックスの統一状態
   for (var m = 0; m < js_chk.length; m++) {
    js_chk[m].checked = this.checked;
   }
  }
 }
	//リスト中のチェックボックスクリック
 for (var i = 0; i < jsitems.length; i++) {
  jsitems[i].onclick = function(e){
			//バブルを阻止し、行のクリックイベント中に直接チェックボックスを選択することが無効になります
   e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble=true;
   chk_canle();
  }
 }
 //行内クリック
 for (var i = 0; i < jsrows.length; i++) {
  jsrows[i].onclick = function(){
			//行内クリック時、行内のチェックボックスの状態は元の状態を反転します。
   this.getElementsByTagName('input')[0].checked = !this.getElementsByTagName('input')[0].checked;
   chk_canle();
  }
		//カーソルを入れ替えるにはhttp:を参照してください//mrthink.net/ジャバスクリプト-タグネームズ-ハイライト/
  jsrows[i].onmouseover = function() {
   this.className = 'hover';
  }
  jsrows[i].onmouseout = function() {
   this.className = '';
  }
 }
}

jqueryのバージョンの核心コード

htmlコード

<form id="jq" name="jq" action="#">
		<h5>jQueryのサンプル</h5>
		<dl>
			<dt><label for="jq_chk_0"><input type="checkbox" id="jq_chk_0" name="chk_can" value="" />全選択/全非選択</label></dt>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />jQueryによる全選択/全非選択、行を選択することでも選択または取消できます</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />jQueryによる全選択/全非選択、行を選択することでも選択または取消できます</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />jQueryによる全選択/全非選択、行を選択することでも選択または取消できます</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />jQueryによる全選択/全非選択、行を選択することでも選択または取消できます</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />jQueryによる全選択/全非選択、行を選択することでも選択または取消できます</dd>
			<dt><label for="jq_chk_1><input type="checkbox" id="jq_chk_1" name="chk_can" value="" />全選択/全非選択</label></dt>
		</dl>
	</form>

jqueryの核心実現コード

//jQで全選択全非選択を実現
$(function() {
 var _jq_chk = $('#jq>dl>dt>label>:checkbox');
 var _jqitems = $(':checkbox[name=jqitems]');
 var _rows = $('#jq>dl>dd');
 //全選択と全非選択を一体的に実現
 _jq_chk.click(function() {
		//リスト内のチェックボックスと全選択チェックボックスの状態を統一
  _jqitems.add(_jq_chk).attr('checked', this.checked);
 });
 //チェックボックスのクリックイベント
 _jqitems.click(function(e) {
  //バブルを阻止し、行のクリックイベント中に直接チェックボックスを選択することが無効になります
  e.stopPropagation();
		//選択された数と実際の数が同じかどうかを判断し、全て選択を確認します。/全て選択しない状態
  _jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
 });
 //行を選択したとき、行内のチェックボックスを選択
 _rows.bind({
  mouseenter: function() {
   $(this).addClass('hover');
  },
  mouseleave: function() {
   $(this).removeClass('hover');
  },
		//選択
  click: function(){
			//行内クリック時、行内のチェックボックスの状態は元の状態を反転します。
   $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').get(0).checked)
			//選択された数と実際の数が同じかどうかを判断し、全て選択を確認します。/全て選択しない状態
   _jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
  }
 });
});

このコードは通常の実現コードよりも多くのものがあり、主に行をクリックすると選択機能が実現されることを表しています。さらに多くの機能やコードがあります。必要に応じて、自由に削除してください。

多くのウェブ開発者が直面するJSの問題について話します。JQで実現するか、JSで実現するか、私たちを悩ますことが多いですが、実際にはJSは汎用であり、JQは自分自身の読み込んだJQライブラリに基づいており、実際の実現には何も違いはありません。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされた内容であり、本サイトは所有権を持ちません。また、人間の編集は行われておらず、関連する法的責任も負いません。著作権侵害が疑われる内容がある場合は、メールを送信してください：notice#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。届出を行い、関連する証拠を提供してください。一旦確認が取れた場合、本サイトは即座に侵害疑いの内容を削除します。）