Implementation of Full Selection for Checkbox in Native JS Version and jQuery Version/Deselect All/Select/Inline Selection (Mr. Think)

In daily projects, for list-type articles or data, the select all or select none function of checkboxes is generally used. In previous projects, I have written JavaScript for checkbox selection, but they were not organized. Just a few days ago, a brother encountered this problem. Fortunately, I spent some time and wrote a version using native JavaScript and jQuery separately. Considering the flexibility of use, it is not encapsulated and needs to be modified by the users themselves when needed.

Function Introduction Click Here to ViewDEMO Demonstration

1. Select All/The Select All/None checkbox is implemented as a whole, that is, the state of the checkboxes in the list is linked with the Select All/The state of the Select All/None checkbox before the Select All checkbox is consistent;
2. Automatically changes the Select All/The state of the Select All/None checkbox, that is, when all checkboxes in the list are selected, the Select All/Select All/None checkbox is also selected, and vice versa;
3. Clicking on the list row can also select the checkbox within, and it is linked with1,2for the联动 function.
Additionally, this article focuses on the implementation of the select all feature, where the background color changes on mouse over and out for a simple implementation. For a more comprehensive solution, please refer to:

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

Core Code of Native JavaScript Version

HTML code

<form id="js" name="js" action="#">
		<h5>Native JavaScript Example</h5>
		<dl>
			<dt><label for="js_chk_0"><input type="checkbox" id="js_chk_0" name="chk_can" value="" />Select all/Deselect all</label></dt>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Select All/None Implemented by Native JavaScript/Deselect all, you can also select or cancel by clicking on the row/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Select All/None Implemented by Native JavaScript/Deselect all, you can also select or cancel by clicking on the row/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Select All/None Implemented by Native JavaScript/Deselect all, you can also select or cancel by clicking on the row/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Select All/None Implemented by Native JavaScript/Deselect all, you can also select or cancel by clicking on the row/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Select All/None Implemented by Native JavaScript/Deselect all, you can also select or cancel by clicking on the row/dd>
			<dt><label for="js_chk_1><input type="checkbox" id="js_chk_1" name="chk_can" value="" />Select all/Deselect all</label></dt>
		</dl>
	</form>

Native JavaScript Code

//Native JavaScript Implementation of Select All/None
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');
 //Determine the select all status based on the number of selected items and the actual number of checkboxes/Status of the unselect all checkbox
 var chk_canle = function(){
  var checkedLen = 0;
		//Calculate the number of checkboxes with selected status in the list
  for (var m = 0; m < jsitems.length; m++) {
   if (jsitems[m].checked) {
    checkedLen += 1;
   }
  }
		//Determine if the number of selected items is the same as the actual number to determine whether to select all/Unselect all status
  for (var m = 0; m < js_chk.length; m++) {
   js_chk[m].checked = (jsitems.length == checkedLen);
  }
 }
	//Implementation of select all and deselect all together
 for (var i = 0; i < js_chk.length; i++) {
  js_chk[i].onclick = function(){
			//Uniform status of the checkbox in the list with the select all checkbox
   for (var m = 0; m < jsitems.length; m++) {
    jsitems[m].checked = this.checked;
   }
			//Uniform status of the select all checkbox
   for (var m = 0; m < js_chk.length; m++) {
    js_chk[m].checked = this.checked;
   }
  }
 }
	//checkbox click in the list
 for (var i = 0; i < jsitems.length; i++) {
  jsitems[i].onclick = function(e){
			//Prevent bubble, to avoid that the direct selection of the checkbox is invalid in the row click event
   e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble=true;
   chk_canle();
  }
 }
 //inline click
 for (var i = 0; i < jsrows.length; i++) {
  jsrows[i].onclick = function(){
			//When clicking on a row, the state of the checkbox in the row is reversed from the original state
   this.getElementsByTagName('input')[0].checked = !this.getElementsByTagName('input')[0].checked;
   chk_canle();
  }
		//Please refer to http: for entering and exiting//mrthink.net/javascript-tagnames-highlight/
  jsrows[i].onmouseover = function() {
   this.className = 'hover';
  }
  jsrows[i].onmouseout = function() {
   this.className = '';
  }
 }
}

Core code of jQuery version

HTML code

<form id="jq" name="jq" action="#">
		<h5>jQuery example</h5>
		<dl>
			<dt><label for="jq_chk_0"><input type="checkbox" id="jq_chk_0" name="chk_can" value="" />Select all/Deselect all</label></dt>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Based on jQuery select all/Deselect all, you can also select or cancel by clicking on the row/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Based on jQuery select all/Deselect all, you can also select or cancel by clicking on the row/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Based on jQuery select all/Deselect all, you can also select or cancel by clicking on the row/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Based on jQuery select all/Deselect all, you can also select or cancel by clicking on the row/dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Based on jQuery select all/Deselect all, you can also select or cancel by clicking on the row/dd>
			<dt><label for="jq_chk_1><input type="checkbox" id="jq_chk_1" name="chk_can" value="" />Select all/Deselect all</label></dt>
		</dl>
	</form>

Core implementation code of jQuery

//jQ implements select all and deselect all
$(function() {
 var _jq_chk = $('#jq>dl>dt>label>:checkbox');
 var _jqitems = $(':checkbox[name=jqitems]');
 var _rows = $('#jq>dl>dd');
 //Implementation of select all and deselect all together
 _jq_chk.click(function() {
		//Uniform status of checkboxes and select all checkboxes in the list
  _jqitems.add(_jq_chk).attr('checked', this.checked);
 });
 //Click event of the checkbox
 _jqitems.click(function(e) {
  //Prevent bubble, to avoid that the direct selection of the checkbox is invalid in the row click event
  e.stopPropagation();
		//Determine if the number of selected items is the same as the actual number to determine whether to select all/Unselect all status
  _jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
 });
 //Selecting a row selects the checkbox within the row
 _rows.bind({
  mouseenter: function() {
   $(this).addClass('hover');
  ,
  mouseleave: function() {
   $(this).removeClass('hover');
  ,
		//Select
  click: function(){
			//When clicking on a row, the state of the checkbox in the row is reversed from the original state
   $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').get(0).checked)
			//Determine if the number of selected items is the same as the actual number to determine whether to select all/Unselect all status
   _jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
  }
 });
});

This code is much more than the ordinary implementation code, mainly manifested in the ability to select by clicking on a row. More features, more code. You can cut and paste according to your needs.

Many web developers may encounter some JS problems. Whether to implement it with JQ or JS often troubles us, but in fact, JS is universal, while JQ is built on its own loaded JQ library, so the actual implementation is completely different.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been edited by humans, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.)