تحقيق اختيارcheckbox الكامل/لا شيء/اختيار نقاطي/اختيار داخلي باستخدام JS الإصدار الأصلي وجونيفر

في المشاريع اليومية، بالنسبة للنصوص أو البيانات القائمة على القوائم، سيتم استخدام وظيفة اختيار المربع المزدوج الكامل أو عدم الاختيار الكامل غالبًا، وقد كتبت أيضًا JavaScript للاختيار في المربعات المزدوجة في مشاريع سابقة، لكن لم أرتبها أبدًا. بالتحديد، قبل عدة أيام، واجهت هذه المشكلة أحد الإخوة، وقررت أنني سأستغرق بعض الوقت لأكتب إصدارين من النصوص الأصلية باستخدام JavaScript وjQuery على التوالي، ولم أغلفها بسبب مشكلة المرونة عند الاستخدام، ويجب على الطلاب الذين يحتاجونها تعديل المعلمات ذات الصلة بشكل مستقل عند الاستخدام.

معرض الفوائد انقر هنا للمعرفةDEMOSresentation

1. تحقيق مربع التحقق الكامل/التحقق من عدم الافتراضي ككل، أي أن حالة مربعات الاختيار في القائمة تتطابق مع حالة مربع التحقق الكامل/التحقق من عدم الافتراضي قبلها;
2. تغيير حالة مربع التحقق الكامل/التحقق من عدم الافتراضي تلقائيًا، إذا كانت جميع مربعات الاختيار في القائمة مختارة، فإن مربع التحقق الكامل/التحقق من عدم الافتراضي مختار أيضًا، والعكس صحيح;
3. يمكنك أيضًا اختيار مربعات الاختيار في السطر عن طريق النقر على السطر، مما ي联动 مع 1 و 2.
بالإضافة إلى ذلك، يركز هذا المقال على كتابة التحقق الكامل، تحويل لون الخلفية عند مرور الفأرة هو تحقيق بسيط، للحصول على تحقيق أكثر كمالًا، يرجى الرجوع إلى:

https://ar.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="" />التحقق الكامل/التحقق من عدم
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />التحقق الكامل/التحقق من عدم الافتراضي, يمكنك أيضًا اختيار أو إلغاء اختيار السطر بالضغط على السطر
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />التحقق الكامل/التحقق من عدم الافتراضي, يمكنك أيضًا اختيار أو إلغاء اختيار السطر بالضغط على السطر
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />التحقق الكامل/التحقق من عدم الافتراضي, يمكنك أيضًا اختيار أو إلغاء اختيار السطر بالضغط على السطر
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />التحقق الكامل/التحقق من عدم الافتراضي, يمكنك أيضًا اختيار أو إلغاء اختيار السطر بالضغط على السطر
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />التحقق الكامل/التحقق من عدم الافتراضي, يمكنك أيضًا اختيار أو إلغاء اختيار السطر بالضغط على السطر
			<dt><label for="js_chk_1"><input type="checkbox" id="js_chk_1" name="chk_can" value="" />التحقق الكامل/التحقق من عدم
		</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/javascript-tagnames-highlight/
  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="" />التحقق من الكل/الإلغاء
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />اختيار/إلغاء اختيار السطر عن طريق النقر على السطر</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />اختيار/إلغاء اختيار السطر عن طريق النقر على السطر</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />اختيار/إلغاء اختيار السطر عن طريق النقر على السطر</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />اختيار/إلغاء اختيار السطر عن طريق النقر على السطر</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />اختيار/إلغاء اختيار السطر عن طريق النقر على السطر</dd>
			<dt><label for="jq_chk_1"><input type="checkbox" id="jq_chk_1" name="chk_can" value="" />التحقق من الكل/الإلغاء
		</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());
 });
 //点选行时选中行内的checkbox
 _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 (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) للإبلاغ، وتقديم الدليل المتعلق، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.